jQuery插件AjaxFileUpload实现ajax文件上传

前端技术 2023/09/01 JavaScript

本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码，供大家参考，具体内容如下

jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。

1、引入AjaxFileUpload插件相关的js

复制代码 代码如下:
<script type=\"text/javascript\" src=\"<%=basePath%>resources/js/jquery-1.2.1.js\"></script>
<script type=\"text/javascript\" src=\"<%=basePath%>resources/js/ajaxfileupload.js\"></script>

备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。

2、实现上传功能代码

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

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1269

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案