看到一个js 的ajax的upload用iframe实现

原站连接

PHP and AJAX Image Upload

 

现在的ajax上传，都是用iframe做过渡的。实现的方式是：

 

1.js 生成或者页面中插入隐藏的iframe元素。

<iframe id='upiframe' name='upiframe' onload='getHtml()'></iframe>

 

2.提交的表单放到生成的iframe页面里面，

提交目标 target = 'upiframe'  ，

 

3.监听iframe的onload事件，获取docuemnt ,及上传后返回的信息。

 

下面是代码，看起来不是很多，用起来也很方便

 

function $m(theVar){
    return document.getElementById(theVar)
}
function remove(theVar){
    var theParent = theVar.parentNode;
    theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
    if(obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if(obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
    if(obj.detachEvent){
        obj.detachEvent('on'+type, fn);
    }else{
        obj.removeEventListener(type, fn, false);
    }
}
function isWebKit(){
    return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
    var detectWebKit = isWebKit();
    form = typeof(form)=="string"?$m(form):form;
    var erro="";
    if(form==null || typeof(form)=="undefined"){
        erro += "The form of 1st parameter does not exists.\n";
    }else if(form.nodeName.toLowerCase()!="form"){
        erro += "The form of 1st parameter its not a form.\n";
    }
    if($m(id_element)==null){
        erro += "The element of 3rd parameter does not exists.\n";
    }
    if(erro.length>0){
        alert("Error in call ajaxUpload:\n" + erro);
        return;
    }
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id","ajax-temp");
    iframe.setAttribute("name","ajax-temp");
    iframe.setAttribute("width","0");
    iframe.setAttribute("height","0");
    iframe.setAttribute("border","0");
    iframe.setAttribute("style","width: 0; height: 0; border: none;");
    form.parentNode.appendChild(iframe);
    window.frames['ajax-temp'].name="ajax-temp";
    var doUpload = function(){
        removeEvent($m('ajax-temp'),"load", doUpload);
        var cross = "javascript: ";
        cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
        $m(id_element).innerHTML = html_error_http;
        $m('ajax-temp').src = cross;
        if(detectWebKit){
            remove($m('ajax-temp'));
        }else{
            setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
    }
    addEvent($m('ajax-temp'),"load", doUpload);
    form.setAttribute("target","ajax-temp");
    form.setAttribute("action",url_action);
    form.setAttribute("method","post");
    form.setAttribute("enctype","multipart/form-data");
    form.setAttribute("encoding","multipart/form-data");
    if(html_show_loading.length > 0){
        $m(id_element).innerHTML = html_show_loading;
    }
    form.submit();
}

 

html中的设置

 

 

	<!-- 
							VERY IMPORTANT! Update the form elements below ajaxUpload fields:
							1. form - the form to submit or the ID of a form (ex. this.form or standard_use)
							2. url_action - url to submit the form. like 'action' parameter of forms.
							3. id_element - element that will receive return of upload.
							4. html_show_loading - Text (or image) that will be show while loading
							5. html_error_http - Text (or image) that will be show if HTTP error.

							VARIABLE PASSED BY THE FORM:
							maximum allowed file size in bytes:
							maxSize		= 9999999999
							
							maximum image width in pixels:
							maxW			= 200
							
							maximum image height in pixels:
							maxH			= 300
							
							the full path to the image upload folder:
							fullPath		= http://www.atwebresults.com/php_ajax_image_upload/uploads/
							
							the relative path from scripts/ajaxupload.php -> uploads/ folder
							relPath		= ../uploads/
							
							The next 3 are for cunstom matte color of transparent images (gif,png), use RGB value
							colorR		= 255
							colorG		= 255
							colorB		= 255

							The form name of the file upload script
							filename		= filename
						-->
						<form action="scripts/ajaxupload.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
							<p><input type="file" name="filename" /></p>
							<button onclick="ajaxUpload(this.form,'scripts/ajaxupload.php?filename=filename&amp;maxSize=9999999999&amp;maxW=200&amp;fullPath=http://www.atwebresults.com/php_ajax_image_upload/uploads/&amp;relPath=../uploads/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=300','upload_area','File Uploading Please Wait...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;">Upload Image</button>
						</form>