异步上传需要用到Jquery的插件。
网上也看到过一些其他方式的异步提交,不过看着比较费劲,最后看了一些资料稍微整理了一下。
JQuery插件:JQuery1.8.3.js
异步上传插件:ajaxfileupload.js
页面代码(只贴出来部分代码):
<input class="btnId" οnclick="opens(this,'#orgCodeCer')" type="button" value="选择文件"/>
<input style="display: none" type="file" id="orgCodeCer" accept=".jpg,.jpeg,.gif,.png" name="orgCodeCer"/>
点击“选择文件”这个Button按钮是激活file标签的单击事件的。(我是不想用file标签的默认样式才这么做的。)
下面贴出JS代码:
<script>
$(function(){
//为file标签绑定change事件
$('#orgCodeCer').bind('change', function() {
upload('orgCodeCer');
});
});
/**
* 打开文件选择窗口
* @param that 当前点击的按钮
* @param element要被打开的file标签的ID,用于激活该标签的单击事件。
*/
function opens(that,element){
var img=$(that).parent("dd").parent("dl").children("img");
$(element).click();
if(img.attr("src")==null){
$(that).val("选择文件");
}
else{
$(that).val("重新选择");
}
}
//文件上传
function upload(fileId){
$.ajaxFileUpload({
url:PATH+'/register/upload',//提交地址
type:"post",//提交方式
secureuri:false,//是否是安全提交
fileElementId:fileId,//file标签的id
dataType: 'json',//返回数据的类型
success: function (data, status) {//上传成功后的回调函数
if(data.success){
}
},
error: function (data, status, e) {//异常捕获
console.log(e);
}
});
}
</script>
后台代码我就不贴出来了。
具体实现就是这些了,总的来说对于JQuery提供的异步上传插件还是很不错的。