Ajax方式上传文件

发布时间：2020-12-15 21:35:53 所属栏目：百科来源：网络整理

导读：介绍传统的文件上传都是需要刷新页面的，Ajax向来都是用在普通的Form表单中。下面要介绍的就是使用Ajax来上传文件。我们这里需要用到一个大家可能不太常用的一个对象FormData，这家伙就是个关键——如果你的浏览器不支持的话，下面的内容就别看了。示例

介绍

传统的文件上传都是需要刷新页面的，Ajax向来都是用在普通的Form表单中。下面要介绍的就是使用Ajax来上传文件。我们这里需要用到一个大家可能不太常用的一个对象FormData，这家伙就是个关键——如果你的浏览器不支持的话，下面的内容就别看了。

示例

后台代码就不介绍了，这里有介绍。下面就开始写前台的代码了：首先肯定是需要一个input标签来定义一个文件选择框了；然后是js代码： [codesyntax lang="javascript"]

var file = $("#file")[0].files[0];
if(file == null){
	var form = new FormData();
	//form = new FormData($("#formId")[0]);
	form.append("file",file);
	$.ajax({
	    url : "uploadTest.do",async : false,type : "POST",data : form,processData : false,contentType : false,success : function(data) {
	    	console.log(data);
	    	alert(data);
	    }
	});
}

[/codesyntax] 对于上面的代码，有几点需要解释一下： FormData这个对象在初始化的时候，可以直接把一个form表单给传递进去，或者也可以通过append函数来添加字段。还有ajax的使用中，processData和contentType这两项是必须得。

预览图片

尼玛，选择完图片就能立马预览？有木有啊？ [codesyntax lang="javascript"]

$("#electronicSignature").change(function(e){
	var files = e.target.files || e.dataTransfer.files;
	if(files && files.length > 0)
	{
		var file = files[0];
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		$('<img src="' + url + '"/>').appendTo("body");
	}
});

[/codesyntax]

参考

http://www.w3school.com.cn/jquery/ajax_ajax.asp http://ileson.iteye.com/blog/2099761

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!