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编码设置成⼆进制，为图⽚或⽂件上传提供编码基础。
jquery在线图片注：表单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" >
2var 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);
22return false;
23 })
24 </script>
上述就是利⽤jquery.form.js插件实现的表单的提交。
将上述两部分结合，就是利⽤HTML和JQUERY实现⽆刷新页⾯的图⽚上传功能。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论