search

Home  >  Article  >  Web Front-end  >  jQuery plug-in AjaxFileUpload implements ajax file upload_jquery

jQuery plug-in AjaxFileUpload implements ajax file upload_jquery

WBOY
WBOYOriginal
2016-05-16 15:02:182484browse

The example in this article shares the specific code of AjaxFileUpload to implement file upload for your reference. The specific content is as follows

The jQuery plug-in AjaxFileUpload is used to implement ajax file upload. The plug-in is very simple to use. Next, I will write a demo to demonstrate how to use the AjaxFileUpload plug-in to implement file upload.

1. Introduce js related to the AjaxFileUpload plug-in

Copy code The code is as follows:
050d0251c47c3bb4ed80505fe3b47cfcresources/js/jquery-1.2.1.js">2cacc6d41bbb37262a98f745aa00fbf0
d2a06dc021fd8be3cb33ff0c5644612dresources/js/ajaxfileupload.js">2cacc6d41bbb37262a98f745aa00fbf0

Note: The test found that ajaxfileupload has requirements for the jQuery version. During use, the js versions corresponding to ajaxfileupload and jQuery must be consistent, otherwise exceptions will occur. You can download it from the ajaxfileupload official website to avoid version conflicts.

2. Implement upload function code 

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

The above is the entire content of this article. I hope it will be helpful to everyone in learning jquery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed graphic explanation of Heap Sort heap sorting algorithm and JavaScript code implementation_Basic knowledgeNext article：Detailed graphic explanation of Heap Sort heap sorting algorithm and JavaScript code implementation_Basic knowledge

Related articles

See more