原站连接
现在的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&maxSize=9999999999&maxW=200&fullPath=http://www.atwebresults.com/php_ajax_image_upload/uploads/&relPath=../uploads/&colorR=255&colorG=255&colorB=255&maxH=300','upload_area','File Uploading Please Wait...<br /><img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' />','<img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /> Error in Upload, check settings and path info in source code.'); return false;">Upload Image</button>
</form>
分享到:
相关推荐
AjaxUpLoad.js的使用实现无刷新文件上传,如图。 图1 文件上传前 图2 文件上传后 1、创建页面并编写HTML 上传文档: <span id=doc><input type=text disabled=disabled /> <input type=hidden id=...
AjaxUpload.js文件的代码,供大家参考,具体内容如下 /** * AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums * Licensed under the MIT license ( ...
本文实例讲述了PHP+iframe模拟Ajax上传文件功能。...页面中有一个表单,表单中有一个上传文件按钮和提交按钮,点击提交按钮执行ajaxUpload函数,然后动态创建iframe标签,让其不可见,最后设置表单
可一次上传多张图片,批量上传图片,显示上传进度条,程序只允许GIF/JPG格式的图像上传,允许其它格式请修改代码,上传程序运行界面如图所示,界面简洁,功能实用,非使用jQuery,完全JavaScript实现的Ajax功能,部分...
ajaxFileUpload是一个异步上传文件的jQuery插件传统的form表单方式上传文件, 必然会刷新整个页面...在 HTML4下, 聪明的程序员们发明了 ajax file upload 方式(form + hidden iframe方式), 就是 ajaxfileupload .js
iframefileupload.js全部通过原生JS实现,同时脱离jquery和ajax,用最少的代码库依赖实现页面无刷新上传文件的同时也可以向后端传递json数据等。
我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已。 HTML5是个好东东,其中之一就是...
在写这篇文档的时候,各空间商们基本没有采用版本5.2.0,文件异步上传只能使用一个折中的解决方式。此前真正的异步上传业界一直没有实现。国外有一个真正异步上传的例子,但它是在服务端用perl语言获取上传文件的...
但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交。 html: 代码如下: <input type=”file” name...
AjaxUpLoad.js的使用实现无刷新文件上传,如图 1、创建页面并编写HTML 上传文档: <span id=doc><input type=text disabled=disabled /> <input type=hidden id=hidFileName /> <input type=...
说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏 upBtnText:上传按钮的文字 参数值:任意字符串,默认值:“上传” 备注:1.0.0 beta2...
jquery.imguruimageploader 基于 JQuery UI Widget Factory 的插件。 您可以使用它将图片上传到 您需要在 Imgur 应用程序设置中允许匿名图像上传。... script src =" js/vendor/jqueryfileupload/jquery.iframe-trans
- 你可以把他当做管理linux的一个操作系统界面 - 可以用来作为私有云存储系统,存储你的文件... - 当然你也可以用来分享文件 - Web IDE / browser code editor awesomeness - 更多场景等你来挖掘!…… #### 3....