Heim > Web-Frontend > js-Tutorial > Hauptteil

Das jQuery-Plug-in AjaxFileUpload implementiert die Ajax-Datei upload_jquery

WBOY
Freigeben: 2016-05-16 15:02:18
Original
2484 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt den spezifischen Code von AjaxFileUpload zur Implementierung des Datei-Uploads als Referenz. Der spezifische Inhalt ist wie folgt

Das jQuery-Plug-in AjaxFileUpload wird zum Implementieren des Ajax-Datei-Uploads verwendet. Das Plug-in ist sehr einfach zu verwenden. Als Nächstes schreibe ich eine Demo, um zu demonstrieren, wie das AjaxFileUpload-Plug-in zum Implementieren des Datei-Uploads verwendet wird.

1. Stellen Sie js im Zusammenhang mit dem AjaxFileUpload-Plug-in vor

Code kopieren Der Code lautet wie folgt:


Hinweis: Der Test ergab, dass für ajaxfileupload Anforderungen an die jQuery-Version gelten. Während der Verwendung müssen die js-Versionen, die ajaxfileupload und jQuery entsprechen, konsistent sein, da sonst Ausnahmen auftreten. Sie können es von der offiziellen Website von ajaxfileupload herunterladen, um Versionskonflikte zu vermeiden.

2. Implementieren Sie den Upload-Funktionscode

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der JQuery-Programmierung hilfreich ist.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage