cari

Rumah >hujung hadapan web >tutorial js >jQuery plug-in AjaxFileUpload melaksanakan ajax file upload_jquery

jQuery plug-in AjaxFileUpload melaksanakan ajax file upload_jquery

WBOY
WBOYasal
2016-05-16 15:02:182530semak imbas

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:
0a5088be1321d0ddeabfa4e2dc4f7e1dresources/js/jquery-1.2.1.js">2cacc6d41bbb37262a98f745aa00fbf0
d2a06dc021fd8be3cb33ff0c5644612dresources/js/ajaxfileupload.js">2cacc6d41bbb37262a98f745aa00fbf0

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan grafik terperinci tentang algoritma pengisihan timbunan Timbunan dan pelaksanaan kod JavaScript_Pengetahuan asasArtikel seterusnya：Penjelasan grafik terperinci tentang algoritma pengisihan timbunan Timbunan dan pelaksanaan kod JavaScript_Pengetahuan asas

Artikel berkaitan

Lihat lagi