ajaxfileupload.js实现上传文件功能

使用ajaxfileupload.js实现上传文件功能

一、ajaxFileUpload是一个异步上传文件的jQuery插语法：$.ajaxFileUpload([options])

options参数说明：

1、url　　　　　　　　　　 上传处理程序地址
2、fileElementId　　　　　 文件选择框的id属性，即的id
3、secureuri　　　　　　　 是否启用安全提交，默认为false
4、dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断
5、success　　　　　　　　服务器响应成功后的处理函数 ，参数data就是服务器返回的数据
6、error　　　　　　　　　 服务器响应失败后的处理函数
7、data 　　　　　　　　　 自定义参数，当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意，数据格式比较严格{param:[{‘param1':'value1','param2':'value2' },{‘param1':'value3','param2':'value4' }]}, 其中单引号不能改为双引号
8、type 　　　　　　　　　 提交数据的方式，一般为post

二、使用方法

第一步、先引入jquery和ajaxFileUpload插件，注意先后顺序：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>

第二步、html代码

原始的，控件展示效果如下：

因为原始控件的样式无法改变，所以我们一般会让这个标签隐藏，然后点击别的标签来触发上传控件。

<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" /> <div class ="input-append"> <label for ="importPicName"> 上传原始图片：</label > <input type ="text" class="input-large" id= "importPicName" /> <a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打开</a> </div > 

展现的页面效果：

第三步、js代码

在用户选择完上传图片后，需要把图片名称显示到输入框中，还需要在js文件中加入代码：

$(document).ready(function(e) {   $('body').on('change',$('#ImportPicInput'),function(){    $( "#importPicName").val($( "#ImportPicInput").val());   }); }); 

上传文件的js代码：

$.ajaxFileUpload({  type: "POST",  url: "/toolkit/importPicFile.do",  data:{picParams:text},//要传到后台的参数，没有可以不写  secureuri : false,//是否启用安全提交，默认为false  fileElementId:'ImportPicInput',//文件选择框的id属性  dataType: 'json',//服务器返回的格式  async : false,  success: function(data){   if(data.result=='success'){    //coding   }else{    //coding   }  },  error: function (data, status, e){   /coding  } });