HTML+jQuery图片上传示例

图片上传HTML部分只需要增加一个表单或在原有的表单中添加<input type="file">的标签，表单示例如下：

1 <form id="imageForm" enctype="multipart/form-data" action="url" method="POST">
2     <input type="text" name="imgName" />
3     <input type="file" name="image" accept=""/>
4     <button type="submit" >上传</button>
5 </form>

其中，form和input[type="file"]的属性是图片或者文件上传的关键属性；

对于要上传图片或文件的表单form，其必要属性为enctype="multipart/form-data"，这一属性主要作用是将form的MIME编码设置成二进制，为图片或文件上传提供编码基础。

注：表单form的默认MIME编码为application/x-www-form-urlencoded。

接下来，是input[type="file"]的属性设置。input[type="file"]是调用了HTML默认提供的本地文件选择的控件。其中，accept属性定义了空间打开时默认浏览的文件格式。accept的部分值（与图片上传相关的值）及其对应的文件格式如下表所示：

值	对应的文件
image/*	所有图片文件
image/png	png格式的图片
image/jpeg	jpg格式的图片
image/gif	gif格式的图片
image/png,image/jpeg,image/gif	png,jpg,gif格式的图片

上述表单能完成图片上传的前台工作，但每次提交表单之后都会刷新页面，会影响用户的交互体验。而对于进行文件上传的表单，ajax提交方式完全不能实现（原理还未知），因此，我引用了jQuery的一个表单插件——jquery.form.js中的ajaxSubmit。

jquery.form.js的ajaxSubmit的使用方式跟ajax类似，不过ajaxSubmit不能直接调用，需要指定对象。

 1 <script type="text/javascript" >
 2     var ajax_option={
 3         url: url,                  //String, 表单提交的目标地址，此属性会覆盖表单的action属性
 4         type:type,             //String，表单提交的方式(POST or GET)，此属性会覆盖表单的method属性
 5         dataType: null,    //String，指定接受服务端返回的数据类型(xml，script  or  json)
 6         clearFomr: true,   //boolean，默认为false，成功提交后是否清除所有表单元素的值
 7         resetFomr: true,  //boolean，默认为false，成功提交后是否重置所有表单元素的值
 8         timeout: 3000,    //number，单位ms，限制请求的时间，当请求大于设置的时间后，跳出请求
 9         success:function(responseText,statusText,xhr,$form){
10             console.log(responseText);
11             //业务提示
12         },//提交成功后的回调函数 。参数详解：responseText，服务器返回的数据内容；statusText，服务器返回的状态
13         beforSubmit: function(formData, jqForm, options){
14             console.log(formData);
15             //业务提示
16         },//提交之前的回调函数。参数详解：formData，数组对象，为表单的内容；jqForm，jQuery对象，封装了表单的元素；options，之前设置的ajaxSubmit的option对象。
17     };
18  
19     //表单提交事件
20     $('#imageForm').submit(function(){
21         $("#imageForm").ajaxSubmit(ajax_option);
22         return false;
23     })
24 </script>

 

上述就是利用jquery.form.js插件实现的表单的提交。

将上述两部分结合，就是利用HTML和JQUERY实现无刷新页面的图片上传功能。

转载于:https://www.cnblogs.com/code-ten/p/4763453.html