ajaxfileupload.js异步上传文件

　　主要优点是实现无刷新上传文件，本篇主要利用jquery的插件ajaxfileupload.js来实现异步上传功能。

一、异步上传单个文件

代码展示：

　　1.jsp页面(一定要引入jquery.js和ajaxfileupload.js)

 1 <script type="text/javascript">
 2     function ajaxFileUpload(){
 3         $("#showImage").ajaxStart(function(){
 4                $(this).hide();
 5            }).ajaxComplete(function(){
 6                $(this).show();
 7            }); 
 8         $.ajaxFileUpload({
 9             url:'ajaxUploadFile_uploadFile.action', 
10             secureuri:false, //是否采用安全协议，默认为false
11             fileElementId:'image', //需要上传的file文件框的id
12             dataType: 'json',
13             success: function (data){
14                $("#showImage").attr("src","/FileUpLoadTest/file/"+data);
15             }
16          });
17          return false;
18     }
19 </script>
20 </head>
21 <body>
22     <h2>异步上传单个文件</h2>
23     <input type="file" name="image" id="image"/><br>
24     <input type="button" value="上传" onclick="return ajaxFileUpload();"><br>
25     <img src="" id="showImage">
26 </body>

二、异步上传多个文件

　　首先将ajaxfileupload.js中的createUploadForm方法修改为允许多文件上传：

function createUploadForm(formId,files,data) { //定义files为一个file数组
        var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        if (data) {
            for (var i in data) {
                $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }
        } 
        for(var i=0;i<files.length;i++){
            var ele = files[i];
            var oldElement = (typeof ele == "string") ? $('#' + ele) : ele;
            var fileId = 'jUploadFile-' + createId();
            var newElement = $(oldElement).clone();
            $(oldElement).attr('id', fileId);
            $(oldElement).before(newElement);
            $(oldElement).appendTo(form);
        }
        //set attributes
        $(form).css('position', 'absolute');
        $(form).css('top', '-1200px');
        $(form).css('left', '-1200px');
        $(form).appendTo('body');
        return form;
    };


jsp页面中

　　var fileNum = 0;
$(document).ready(function(){
　　$("#addFile").click(function(){
　　　　fileNum++;
　　　　var addFile = "<input type='file' name='images' id='image" + fileNum + "'/><br><br>";
　　　　$("#files").append(addFile);
　　});
　　$("#upload").click(function(){
　　　　$("#upload").addClass("disabled");
　　　　$("#upload").attr("disabled" ,true);
　　　　$("#upload").attr("title" ,"文件上传中...");
　　　　uploadFile();

　　});
});

//文件上传
function uploadFile(){
　　var images = new Array();
　　for(var i = 0; i<fileNum + 1; i++){
　　　　images.push($("#image"+ i));
　　}
　　$.ajaxFileUpload({
　　　　url:'ajaxManyUpload_uploadManyFile',
　　　　secureuri:false, //是否采用安全协议，默认为false
　　　　files:images,
　　　　dataType: 'json',
　　　　success: function (data){

　　　　error: function (data, status, e){
　　　　　　alert(e);
　　　　}
　　});
}

<body>

</body>

注：文件上传后台struts代码在struts2分类中文件上传查找。

posted on 2013-05-17 17:26 筱筱清流水阅读(696) 评论(0) 编辑收藏举报

刷新页面返回顶部

ajaxfileupload.js异步上传文件

公告