jQuery plug-in AjaxFileUpload melaksanakan ajax file upload

jQuery plug-in AjaxFileUpload melaksanakan ajax file upload_jquery

WBOY

Lepaskan： 2016-05-16 15:02:18

asal

2450 orang telah melayarinya

Contoh dalam artikel ini berkongsi kod khusus AjaxFileUpload untuk melaksanakan muat naik fail untuk rujukan anda. Kandungan khusus adalah seperti berikut

Pemalam jQuery AjaxFileUpload digunakan untuk melaksanakan muat naik fail ajax. Pemalam ini sangat mudah digunakan. Seterusnya, saya akan menulis demo untuk menunjukkan cara menggunakan pemalam AjaxFileUpload untuk melaksanakan muat naik fail.

1. Perkenalkan js yang berkaitan dengan pemalam AjaxFileUpload

Salin kod Kod adalah seperti berikut:

Nota: Ujian mendapati bahawa ajaxfileupload mempunyai keperluan untuk versi jQuery Semasa penggunaan, versi js yang sepadan dengan ajaxfileupload dan jQuery mesti konsisten, jika tidak, pengecualian akan berlaku Anda boleh memuat turunnya dari tapak web rasmi ajaxfileupload untuk mengelakkan konflik versi.

2. Laksanakan kod fungsi muat naik

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan jquery.