2012-01-19 4 views
0

私は隠されたiFramesを使用して写真をアップロードするために長い機能を少し持っています。それは素晴らしいことですし、すべてがうまくいきます。いくつかの行しか持たないクリーンな関数などがあります。JavaScriptの機能を簡素化する必要があります(jqueryも使用します)

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"}); 
*/ 
} 

わかりましたので、新しい関数で定義されるべきであると私は/ ** /そのブロックのためにあるアクションで、コードのブロックの周りにコメントしている、ここで数行のコードがあります。

+0

私は余分なコメントを削除したいですコード。次に、iframe/formパラメータを連想配列に移動し、その配列をループすることでiframe/formパラメータを設定します。 – Minras

答えて

0

を得ることが Jquery Upload File Demo

そして、ここで、このデモを見て見ることができます:

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() 
} 
0

1つの可能性は、その中に共通するすべての機能を持つ基本クラスを作成し、それからより特定の機能を持つ新しいクラスを作成することです。

http://ejohn.org/blog/simple-javascript-inheritance/

+0

ありがとうございます、この前にこれを使用していないとして少し混乱しているように見えます。 –

+0

トピックを少し消しましたが、プレーンJSの代わりにcoffescriptを使ってみましたか?それは少しきれいです(とにかくJSにコンパイルされます)。これは、物事を少しはっきりさせ、理解しやすく/読むのを容易にします。 – Magrangs

+0

私はそうではありません。 –

0

Iframeメソッド「推奨されない」int 2.0ウェブ時代。

innerHTMLと他の標準的な方法を忘れてください。

Jqueryを使用する予定がある場合は、タスクをより簡単かつ効率的に行うことができます。

ここであなたはあなたが行く参照してハウツーここ Jquery Upload Documentation

+0

私は '