这篇文章主要介绍了一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子,需要的朋友可以参考下

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法。

使用说明

需要使用jQuery库文件 和AjaxFileUpload库文件

使用实例

一,包含文件部分


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>

二,HTML部分


<img id="loading " src="loading.gif" style="display:none;">
<input id="fileToUpload " type="file" size="20" name="fileToUpload " class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload ();">上传</button>

只需要三个元素,一个动态加载小图标、一个文件域和一个按钮
注意:使用AjaxFileUpload插件上传文件可不需要form,如下:

<form name="form" action="" method="POST" enctype="multipart/form-data">
……相关html代码……
</form>
因为AjaxFileUpload插件会自动生成一个form提交表单。

对于file文件域ID和name,ajaxFileUpload插件fileElementId参数需要获取文件域ID,如果处理上传文件操作就需要知道文件域name,以便获取上传文件信息,这两者关系一定要清楚。

三,javascript部分

<script type="text/javascript"> function ajaxFileUpload (){ loading();//动态加载小图标 $.ajaxFileUpload ({ url :'upload.php', secureuri :false, fileElementId :'fileToUpload', dataType : 'json', success : function (data, status){ if(typeof(data.error) != 'undefined'){ if(data.error != ''){ alert(data.error); }else{ alert(data.msg); } } }, error: function (data, status, e){ alert(e); } }) return false; } function loading (){ $("#loading ").ajaxStart(function(){ $(this).show(); }).ajaxComplete(function(){ $(this).hide(); }); } </script> 

主要参数说明:
1,url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php
2,fileElementId表示文件域ID,如上:fileToUpload
3,secureuri是否启用安全提交,默认为false
4,dataType数据数据,一般选json,javascript的原生态
5,success提交成功后处理函数
6,error提交失败处理函数

上面有两个方法,一个动态加载小图标提示函数loading()和ajaxFileUpload文件上传$.ajaxFileUpload()函数,这与我们使用jQuery.ajax()函数差不多,使用很简单,这里我省略了PHP处理上传文件,使用jQuery插件 AjaxFileUpload实现ajax文件就这么简单。

同时我们需要了解相关的错误提示

1,SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问

2,SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误

3,SyntaxError: invalid property id错误
如果出现这个错误就需要检查属性ID是否存在

4,SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件域名称是否一致或不存在

5,其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用,由于其简单易用,因些这个插件相比其它文件上传插件使用人数最多,非常值得推荐。
 
处理页面:

using System;using System.Collections;using System.Configuration;using System.Data;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;public partial class web_ajax_FileUpload : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) {  HttpFileCollection files = HttpContext.Current.Request.Files;  //if (files[0].ContentLength > 5)  //{  // Response.Write("{");  // Response.Write("msg:'" + files[0].FileName + "',");  // Response.Write("error:'文件上传失败'");  // Response.Write("}");  //}  //else  //{  // Response.Write("{");  // Response.Write("msg:'没有文件被上传',");  // Response.Write("error:'文件上传失败'");  // Response.Write("}");  //}  files[0].SaveAs("d:/adw.jpg");  Response.Write("{");  Response.Write("msg:'a',");  Response.Write("error:''");  Response.Write("}");  //Response.Write("{");  //Response.Write("msg:'gggn',");  //Response.Write("error:'aan'");  //Response.Write("}");  Response.End(); }}

其它网友的补充:

页面代码:


<html>
  <!-- 引入相关的js文件,相对路径  -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/ajaxfileupload.js"></script>

  <!-- 执行上传文件操作的函数 -->
  <script type="text/javascript">
  function ajaxFileUpload(){
$.ajaxFileUpload(
{
  url:'update.do?method=uploader',  //需要链接到服务器地址
  secureuri:false,
  fileElementId:'houseMaps',  //文件选择框的id属性
  dataType: 'xml', //服务器返回的格式,可以是json
  success: function (data, status)  //相当于java中try语句块的用法
  { 
  $('#result').html('添加成功');
  },
  error: function (data, status, e)  //相当于java中catch语句块的用法
  {
  $('#result').html('添加失败');
  }
  }

);
 
  }
  </script>
  </head> 
  <body>
  <form method="post" action="update.do?method=uploader" enctype="multipart/form-data"> 
  <input type="file" id="houseMaps" name="houseMaps"/>
  <input type="button" value="提交" onclick="ajaxFileUpload()"/>
  </form>
  <div id="result"></div>
 
  </body>
</html>

服务器代码:


public class UpdateAction extends DispatchAction {

  public ActionForward uploader(ActionMapping mapping, ActionForm form,
  HttpServletRequest request, HttpServletResponse response) {
  UpFormForm upFormForm = (UpFormForm) form;
  FormFile ff = upFormForm.getHouseMaps();
  try {
  InputStream is = ff.getInputStream();
  File file = new File("D:/" + ff.getFileName());  //指定文件存储的路径和文件名
  OutputStream os = new FileOutputStream(file);
 
  byte[] b = new byte[1024];
  int len = 0;
  while((len = is.read(b)) != -1){
  os.write(b, 0, len);
  }
  os.close();
  is.close();
  } catch (Exception e) {
  e.printStackTrace();
 
  }
 
  return null;
  }
}

最新资讯
美司法部控告六人涉嫌贿赂亚马逊员工以获得市场优势

美司法部控告六人涉嫌

据报道,美国司法部周五指控六人参与贿赂亚马逊员工和承
最新发现的一次大灭绝事件

最新发现的一次大灭绝

2.33亿年前,地球成为“炼狱”。在我们现在所知的加拿大
拯救替罪羊,科学能帮到我们什么?

拯救替罪羊,科学能帮到

被错误指控的人,即使最终能洗脱罪名,通常也需要多年的等
恒大汽车要登陆科创板:汽车尚未卖一辆 已聚集了许家印马云马化腾

恒大汽车要登陆科创板

恒大汽车董事会宣布决议,拟发行人民币股份于上交所科创
才貌双全的清华女神教授,2020年又拿奖,却说只想“任性”地活

才貌双全的清华女神教

距颜宁2017年辞去清华大学教授,已经过去了三年。看起来
爱立信同意11亿美元收购美5G方案商Cradlepoint

爱立信同意11亿美元收

瑞典电信设备制造商爱立信表示,它已同意以11亿美元的价
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,