Ajax上传图片和上传前预览功能示例代码

EasyUI用于手头的几个小项目。一开始使用easyUI的决定注定了整个项目的前端和后端是分开的，基本上所有的请求都是由Ajax完成的。上传文件时，使用了Ajax上传文件，上传前图片的预览效果解决了这两个小问题。与朋友分享。

上传前预览

模式1

先说说上传图片前的预览。这里主要使用HTML5中的FileReader对象。如果不理解FileReader对象，可以查看本文中HTML5学习的FileReader界面。让我们看看实现：

！doctype html lang=' en ' head meta charset=' utf-8 ' title Ajax上传文件/title script src=' http : jquery-3 . 2 . 1 . js '/script/headdy用户名：输入id=' username ' type=' text ' bruser image:输入id=' user face ' type=' file ' onchange=' preview(this)' br Div id=' preview '/Div输入类型=' button ' id=' btnclick ' value=' upload ' script $(')click(function(){ varformdata=new formdata()；formData.append('username '，$('#username ')。val())；formData.append('file '，$('#userface')[0]。文件[0])；$.ajax({ url: '/fileupload '，type: 'post '，data: formData，processData: false，contentType: false，success : function(msg){ alert(msg)；} });});函数预览(文件){ var previdiv=document . getelementbyid(' preview ')；if(file . files file . files[0]){ var reader=new FileReader()；reader . onload=function(evt){ previdiv . innerhtml=' img src=' http : ' evt . target . result ' '/'；} reader . readasdataurl(file . files[0])；} else { previdiv . innerhtml=' div class=' img ' style=' filter : progid : maximagettransform。Microsoft . AlphaimageLoader(SizingMethod=scale，src=\ ' ' file . value ' \ ' '/div '；} }/script/body/html这里，支持FileReader的浏览器直接由FileReader实现，不支持FileReader的浏览器由Microsoft filter实现(注意对图片上传的输入标签设置onchange功能)。

效果如下：

模式2

除了这种方式，我们还可以采用一种互联网上可用的jQuery实现方式。这里主要是指。

但是，因为原始文本非常旧，其中使用的$.browser.msie已经从jQuery1.9中删除，所以如果我们想使用这个，我们必须做一点额外的处理。我修改的uploadPreview.js文件如下：

jquery。浏览器={ }；(function(){ jquery。浏览器。msie=falsejquery。浏览器。版本=0；if(导航器。用户代理。匹配(/MSIE([0-9])./))){ jquery。浏览器。msie=真；jQuery.browser.version=RegExp .$1;}})();jquery。fn。extend({ uploadpreviews : function(opts){ var _ self=this，_ this=$(this)；opts=jquery。extend({ img : ' ImgPr '，Width: 100，Height: 100，ImgType: ['gif '，' jpeg '，' jpg '，' bmp '，' png']，Callback: function () {} }，opts | | { })；_self.getObjectURL=函数（文件){ var URL=null if(window . createobjecturl！=未定义){ URL=窗口。createobjecturl(文件)} else if(窗口.网址！=未定义){ url=window .URL.createObjectURL(文件)} else if (window.webkitURL！=未定义){ URL=窗口。webkiturl。createobjecturl(文件)}返回URL }；_这个。change(function(){ if(this。value){ if(！RegExp('\ .(' opts .imgtype . join(' | ')' $ '，' I ').测试(这个。价值。tolowercase()){ alert('选择文件错误，图片类型必须是选择ImgType.join('，') '中的一种');this.value=如果($.browser.msie) { try { $('#' opts)、则返回假的.Img).attr('src '，_ self。getobjecturl(这。文件[0])} catch(e){ var src=' '；var obj=$('# '选项. img)；var div=obj。父代(' div ')[0]；_ self。select()；if (top！=self){ window。父母。文件。尸体。focus()} else { _ self。blur()} src=document。选择。创建范围().文本；文件。选择。empty()；物体。hide()；obj.parent('div ').CSS({ ' filter ' : ' progid : maximagettransform .微软。alpha imageloader(大小调整方法=比例)'，宽度' :个选项。宽度px '，高度：次选择.高度px ' })；div。过滤器。项目(' dximagettransform .微软。alpha imageloader’).src=src } } else { $("# "选项Img).attr('src '，_ self。GetObjectURl(这个。文件[0])}选项.回调()} })});然后在我们的超文本标记语言文件中引入这个射流研究…文件即可：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title AJax上传文件/title脚本src=' http : jquery-3。2 .1 .js /脚本脚本src=' http : uploadpreview。js /脚本/流浆池用户名：输入id="用户名"类型="文本“br用户图像：输入id=' user face ' type=' file ' on change=' preview(this)' brdivimg id=' ImgPr ' width=' 200 ' height=' 200 '/divinput type=' button ' id=' btnClick ' value='上传脚本$('#btnClick ').单击(function(){ var formData=new formData()；formData.append('username '，$('#username ').val())；formData.append('file '，$('#userface')[0]).文件[0]);$.ajax({ url: '/fileupload '，type: 'post '，data: formData，processData: false，contentType: false，success : function(msg){ alert(msg)；} });});$('#userface ').上传预览({Img: 'ImgPr '，宽度： 120,高度： 120 });/脚本/正文/html这里有如下几点需要注意：

1.超文本标记语言页面中要引入我们自定义的uploadPreview.js文件

2.预先定义好要显示预览图片的img标签，该标签要有身份证。

3.查找到img标签然后调用上传预览函数

执行效果如下：

埃阿斯上传图片文件

埃阿斯上传图片文件就简单了，没有那么多方案，核心代码如下：

var formData=new formData()；formData.append('username '，$('#username ')。val())；formData.append('file '，$('#userface')[0]。文件[0])；$.ajax({ url: '/fileupload '，type: 'post '，data: formData，processData: false，contentType: false，success : function(msg){ alert(msg)；} });核心是定义一个FormData对象，并将要上传的数据包装到这个对象中。然后，当ajax上传数据时，将data属性设置为formdata，将processData属性设置为false，表示jquery不应该处理发送的数据，然后将contentType属性设置为false，表示不应该设置请求头的contentType属性。好了，主要是设置这三个。设置成功后，其他处理与传统的ajax用法一致。

可以下载文末案例中的后台处理代码，这里就不展示了。

源代码下载：http://xiazai.jb51.net/201707/yuanma/AjaxFileUpload.rar

摘要

以上是边肖介绍的Ajax上传图片和预览功能示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！