jQuery的插件ajaxFileupload上传文件

最新推荐文章于 2022-11-22 10:45:38 发布

Senssic

最新推荐文章于 2022-11-22 10:45:38 发布

阅读量1.1k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/Senssic/article/details/30218667

版权

Jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。

2.单个文件上传

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ajax文件上传</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
    <script type="text/javascript">
    $(function(){
       //上传图片
       $("#btnUpload").click(function() {
               alert(ajaxFileUpload());
       });
    });
    function ajaxFileUpload() {
        // 开始上传文件时显示一个图片
        $("#wait_loading").ajaxStart(function() {
            $(this).show();
        // 文件上传完成将图片隐藏起来
        }).ajaxComplete(function() {
            $(this).hide();
        });
        var elementIds=["flag"]; //flag为id、name属性名
        $.ajaxFileUpload({
            url: 'uploadAjax.htm', 
            type: 'post',
            secureuri: false, //一般设置为false
            fileElementId: 'file', // 上传文件的id、name属性名
            dataType: 'text', //返回值类型，一般设置为json、application/json
            elementIds: elementIds, //传递参数到服务器
            success: function(data, status){  
                alert(data);
            },
            error: function(data, status, e){ 
                alert(e);
            }
        });
        //return false;
    }
    </script>
  </head>
  
  <body>
    <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
        <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
        <br></br>
        <div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>
        <br></br>
    </div>
    <input type="file" id="file" name="file"><br/>
    <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
    <input type="button" id="btnUpload" value="上传图片" />
  </body>
</html>

2.多文件上传

修改ajaxfileupload.js

先到官网下载该插件.

将源文件的createUploadForm的代码替换如下：

createUploadForm: function(id, fileElementId, data)  
        {  
            //create form     
            var formId = 'jUploadForm' + id;  
            var fileId = 'jUploadFile' + id;  
            var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');      
            if (data) {  
                for ( var i in data) {  
                    jQuery(  
                            '<input type="hidden" name="' + i + '" value="'  
                                    + data[i] + '" />').appendTo(form);  
                }  
            }  
            for (var i = 0; i < fileElementId.length; i ++) {  
                var oldElement = jQuery('#' + fileElementId[i]);  
                var newElement = jQuery(oldElement).clone();  
                jQuery(oldElement).attr('id', fileElementId[i]);  
                jQuery(oldElement).attr('name', fileElementId[i]);  
                jQuery(oldElement).before(newElement);  
                jQuery(oldElement).appendTo(form);  
            }  
            //set attributes  
            jQuery(form).css('position', 'absolute');  
            jQuery(form).css('top', '-1200px');  
            jQuery(form).css('left', '-1200px');  
            jQuery(form).appendTo('body');  
            return form;  
        }

上传代码：

function ajaxFileUploadImg(id){  
        //获取file的全部id  
        var uplist = $("input[name^=uploads]");  
    var arrId = [];  
    for (var i=0; i< uplist.length; i++){  
        if(uplist[i].value){  
            arrId[i] = uplist[i].id;  
        }  
        }  
    $.ajaxFileUpload({  
        url:'xxxxx',  
        secureuri:false,  
        fileElementId: arrId,  //这里不在是以前的id了，要写成数组的形式哦！  
        dataType: 'text',  
        data: {  
                     //需要传输的数据  
                },  
        success: function (data){  
        },  
        error: function(data){  
        }  
    });  
}

js文件下载：http://download.csdn.net/detail/senssic/7486863

参考：http://blog.csdn.net/zhanglu201112/article/details/17039137