Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
需要简化javascript函数(也使用jquery)_Javascript_Jquery_Function - Fatal编程技术网

需要简化javascript函数(也使用jquery)

需要简化javascript函数(也使用jquery),javascript,jquery,function,Javascript,Jquery,Function,我有一个很长的使用隐藏iFrame上传照片的功能,它工作得很好,所有的东西都很好,问题是它有很多凌乱的代码,我想做一个干净的功能,只有几行或这样,使它更容易和更少的代码工作 function fileUpload(form, action_url) { // Create the iframe... var iframe = document.createElement("iframe"); iframe.setAttribute("id","upload_iframe"); iframe.se

我有一个很长的使用隐藏iFrame上传照片的功能,它工作得很好,所有的东西都很好,问题是它有很多凌乱的代码,我想做一个干净的功能,只有几行或这样,使它更容易和更少的代码工作

function fileUpload(form, action_url)
{
// Create the iframe...
var iframe = document.createElement("iframe");
iframe.setAttribute("id","upload_iframe");
iframe.setAttribute("name","upload_iframe");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");

// Add to document...
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name="upload_iframe";

iframeId = document.getElementById("upload_iframe");

// Add event...
var eventHandler = function()  {

if (iframeId.detachEvent)
iframeId.detachEvent("onload", eventHandler);
else
iframeId.removeEventListener("load", eventHandler, false);

// Message from server...
if (iframeId.contentDocument) {
content = iframeId.contentDocument.body.innerHTML;
} else if (iframeId.contentWindow) {
content = iframeId.contentWindow.document.body.innerHTML;
} else if (iframeId.document) {
content = iframeId.document.body.innerHTML;
}
if(content)
{
/* THIS CODE SHOULD BE DEFINED IN NEW FUNCTION, AND PLACED HER AUTOMATICALLY- onSuccess()
$('img.profile-picture').attr("src","photos/"+content+"_200.jpg");
$('.post-photo'+cookie('login')).attr("src","photos/"+content+"_55.jpg");
$(".add-photo-loading").fadeOut("fast");
*/
}
else
{
/*THIS SHOULD ALSO BE DEFINED IN THE NEW FUNCTION - onError()
$(".add-photo-loading").html("Invalid Filetype");
$(".add-photo-loading").attr("class","upload-error");
*/
}
// Del the iframe...
setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
}

if (iframeId.addEventListener)
iframeId.addEventListener("load", eventHandler, true);
if (iframeId.attachEvent)
iframeId.attachEvent("onload", eventHandler);

// Set properties of form...
form.setAttribute("target","upload_iframe");
form.setAttribute("action", action_url);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");

// Submit the form...
form.submit();
/*THIS SHOULD BE FIRED IMMEDIATELY WHEN THIS FUNCTION IS CALLED BUT THIS CODE SHOULD ALSO BE FIRED ELSEWHERE 
$(".upload-error").attr("class","add-photo-loading");
$(".add-photo-loading").html("Uploading...");
$(".add-photo-loading").css({"display":"block"});
*/
}

好的,这里有几行代码应该在新函数中定义,我对代码块进行了/**/注释,使用针对该块的操作。

一种可能性是创建一个包含所有公共功能的基类,然后创建一个新的类,该类从该基类扩展而来,其中包含更具体的功能

e、 g.

Iframe方法在2.0网络时代已经“弃用”

请忘记innerHTML和其他非标准方式

如果您计划使用Jquery,那么这项任务可能会更简单、更高效

在这里你可以看到它看到这个演示

这是你的参考资料和操作方法 给你:

function fileUpload(a, b) {
var c = document.createElement("iframe");
c.setAttribute("id", "upload_iframe"), c.setAttribute("name", "upload_iframe"), c.setAttribute("width", "0"), c.setAttribute("height", "0"), c.setAttribute("border", "0"), c.setAttribute("style", "width: 0; height: 0; border: none;"), a.parentNode.appendChild(c), window.frames.upload_iframe.name = "upload_iframe", iframeId = document.getElementById("upload_iframe");
var d = function () {
    iframeId.detachEvent ? iframeId.detachEvent("onload", d) : iframeId.removeEventListener("load", d, !1), iframeId.contentDocument ? content = iframeId.contentDocument.body.innerHTML : iframeId.contentWindow ? content = iframeId.contentWindow.document.body.innerHTML : iframeId.document && (content = iframeId.document.body.innerHTML), setTimeout("iframeId.parentNode.removeChild(iframeId)", 250)
};
iframeId.addEventListener && iframeId.addEventListener("load", d, !0), iframeId.attachEvent && iframeId.attachEvent("onload", d), a.setAttribute("target", "upload_iframe"), a.setAttribute("action", b), a.setAttribute("method", "post"), a.setAttribute("enctype", "multipart/form-data"), a.setAttribute("encoding", "multipart/form-data"), a.submit()
}

我不认为
是不受欢迎的-它在HTML5规范中很受欢迎(请参阅)-jQuery本身似乎使用
innerHTML
16次(请参阅)。感谢您提供链接。如果您提供示例代码,那就更好了。不要让读者追逐这些链接,在这里给他们一个答案。innerHTML不是“非标准的”-它实际上是定义的方法:在很多情况下,使用iframe是完全合乎逻辑的,例如XHR上传文件很多,或者大多数jQuery插件都有iframe作为回退方法。@PaulD.Waite iframe,而且它可能是一个安全隐患。研究一下。Jquery使用innerHTML,因为它是跨平台的。此外,这是一个IE“专有”属性。而且不是标准的。我会删除额外的注释代码。然后我会将iframe/form参数移动到一个关联数组中,并通过循环该数组来设置iframe/form参数。谢谢,看起来有点困惑,因为以前从未使用过它。有点离题,但您是否尝试过使用coffescript而不是普通的JS?它有点整洁(并且编译成JS)。它使事情更清楚,更容易理解/阅读。