var Uploader = (function(){
/**
* @param options
* @param callback
* @returns
* @desc 创建iframe
*/
var iframe = function(options) {
options = options || {
id : 'iframe' + Math.random(),
name : 'iframe',
src : ''
};
var iframe;
try{
iframe = document.createElement('<iframe name=' + options.name + '>');
}catch(e) {
iframe = document.createElement('iframe');
iframe.name = options.name;
}
options.id && (iframe.id = options.id);
iframe.src = options.src;
iframe.style.cssText = options.cssText;
return iframe;
};
/**
* @param {file}
* @return {}
* @desc 上传文件
*/
function Uploader(file){
var name,hidden;
var uuid = Uploader.uuid++;
this.state = 0;
this.file = file;
this.form = file.form;
name = 'upload_file_'+ uuid;
this.iframe = iframe({
name:name,
src:'blank.html',
cssText:'display:none;'
});
document.body.appendChild(this.iframe);
this.form.target = name;
};
Uploader.uuid = 0;
Uploader.prototype = {
upload:function(callback){
//生成JSONP回调
var ts,jsonp,uploader,action,jsonpCallback;
ts = (new Date()).getTime();
jsonp = 'jsonp' + ts;
uploader = this;
window[jsonp] = function(ret){
callback(ret);
uploader.state = 0;
};
action = this.form.action;
jsonpCallback = 'parent.' + jsonp;
if(action.indexOf('callback') > -1){
action = action.replace(/jsonp\d+/,jsonpCallback);
}else{
action += (action.indexOf('?') > -1 ? '&callback=' : '?callback=') + jsonpCallback;
}
this.form.action = action;
this.state = 1;//开始上传
this.form.submit();
return jsonp;
},
readyState:function(){
return this.state;
},
cancel:function(jsonp){
typeof window[jsonp] && (window[jsonp] = function(){});
}
};
return Uploader;
})();
这种上传文件的方法不会刷新页面,类似于Ajax。原理就是将要提交的表单target属性和页面中隐藏的iframe的name属性相等。实际就是iframe做提交
而iframe本身是不可见的,所以用户不会看到页面刷新的效果,请求成功或者失败服务器端都要返回一个script元素,该元素里面有一个
发送请求时候传递的回调函数callback,请求成功或者失败就会执行callback函数把服务器处理的结果作为回调函数传递到前端。
页面调用:
var file = document.getElementById('file'),uploader;
uploader = new Uploader(file);
uploader.upload(function(data){
//成功或失败处理
});
分享到:
相关推荐
利用flash和javascript技术实现文件的异步上传功能!
JavaScript js Ajax 异步 上传文件 包含servlet action 以及JSP 代码
asp.net异步上传小文件,已经设置好了前端界面风格。。。。。。。。。。。。。。。。。。。。。。。
JavaScript中三种异步上传文件方式_.docx
原生js上传文件,支持formdata,base64上传文件,图片可以压缩,变色,调节尺寸上传
Ajax文件上传 js上传 异步上传 兼容IE chrome Firefox
异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能。这里我提出三点有关异步文件上传的方式。 使用第三方控件,如Flash,ActiveX等浏览器插件上传。 使用隐藏的iframe模拟异步上传。 使用...
原生js上传文件,图片上传做了相应的压缩,变色,尺寸修改
主要介绍了原生JavaScript实现异步多文件上传,感兴趣的小伙伴们可以参考一下
本文通过实例代码给大家介绍了js异步上传图片文件的方法,包括html和jquery代码,需要的的朋友参考下吧
Javascript异步上传文件。还不错
这个是使用JavaScript中FormData格式化表单数据使之成为key/value,使用ajax异步上传数据的demo。 包含html和服务端解析数据并保存文件
AjaxUploadFile异步传输上传文件javascript库主文件:AjaxUploadFile.js###功能: 1.单文件上传 2.多文件上传 3.普通数据提交 4.可选返回数据json(默认),xml,text 5.支持XMLHttpRequest大多数事件 6.上传超时设置 7...
下面小编就为大家带来一篇原生javascript实现文件异步上传的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
//打开连接//监听上传事件//监听上传属性的上传事件,每次上传事件都会执行 progressHandlingFunction//执行上传//上传监听//获取上
一、ajaxFileUpload是一个异步上传文件的jQuery插件。 传一个不知道什么版本的上来,以后不用到处找了。 语法:$.ajaxFileUpload([options]) options参数说明: 1、url 上传处理程序地址。 2,fileElementId ...
浏览器迫使我们使用文件输入控件(”file” />)做上传,然而此控件的样式是不能修改的。...Ajax Upload文件上传插件不会污染任何命名空间,所以它与jQuery,Prototypejs,mootools其他JavaScript库兼容。
写了一篇博客,为这个博客来个案例,您可以根据我的博客看看 https://blog.csdn.net/cr4blm123/article/details/97525737