jQuery插件AjaxFileUpload實現ajax文件上傳

時間 2019-11-24

標籤 jquery 插件 ajaxfileupload 實現 ajax 文件上傳欄目 JQuery 简体版

原文原文鏈接

jQuery插件AjaxFileUpload用來實現ajax文件上傳，該插件使用很是簡單，接下來寫個demo演示怎麼用AjaxFileUpload插件實現文件上傳。javascript

一、引入AjaxFileUpload插件相關的jsphp

<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>

備註：測試發現，ajaxfileupload對jQuery版本是有要求的，在使用中ajaxfileupload和jQuery對應的js版本要一致，否則會致使異常發生，能夠從ajaxfileupload官網下載，避免版本衝突。css

二、實現上傳功能代碼html

<%@ 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>