Maison > Article > interface Web > Le plug-in jQuery AjaxFileUpload implémente le fichier ajax upload_jquery

Le plug-in jQuery AjaxFileUpload implémente le fichier ajax upload_jquery

WBOYoriginal: 2016-05-16 15:02:182448parcourir

L'exemple de cet article partage le code spécifique d'AjaxFileUpload pour implémenter le téléchargement de fichiers pour votre référence. Le contenu spécifique est le suivant

Le plug-in jQuery AjaxFileUpload est utilisé pour implémenter le téléchargement de fichiers ajax. Le plug-in est très simple à utiliser. Ensuite, j'écrirai une démo pour montrer comment utiliser le plug-in AjaxFileUpload pour implémenter le téléchargement de fichiers.

1. Présentez js lié au plug-in AjaxFileUpload

Copier le code Le code est le suivant :

0a5088be1321d0ddeabfa4e2dc4f7e1dresources/js/jquery-1.2.1.js">2cacc6d41bbb37262a98f745aa00fbf0

d2a06dc021fd8be3cb33ff0c5644612dresources/js/ajaxfileupload.js">2cacc6d41bbb37262a98f745aa00fbf0

Remarque : le test a révélé qu'ajaxfileupload a des exigences pour la version jQuery. Lors de l'utilisation, les versions js correspondant à ajaxfileupload et jQuery doivent être cohérentes, sinon des exceptions se produiront. Vous pouvez le télécharger depuis le site officiel d'ajaxfileupload pour éviter les conflits de version.

2. Implémenter le code de la fonction de téléchargement

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation jquery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication graphique détaillée de l'algorithme de tri de tas Heap Sort et de l'implémentation du code JavaScript_Connaissances de baseArticle suivant：Explication graphique détaillée de l'algorithme de tri de tas Heap Sort et de l'implémentation du code JavaScript_Connaissances de base

Articles Liés

Voir plus