Ajax方式上传文件

最新推荐文章于 2022-08-09 23:15:05 发布

chuannaoxuan4674

最新推荐文章于 2022-08-09 23:15:05 发布

阅读量45

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/surenpi/blog/605345

版权

介绍

传统的文件上传都是需要刷新页面的，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]