一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子


Posted in Javascript onJune 26, 2014

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:'ggg\n',");
  //Response.Write("error:'aa\n'");
  //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;

    }

}
Javascript 相关文章推荐
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
js中!和!!的区别与用法
May 09 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
php读取sqlite数据库入门实例代码
Jun 25 #Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 #Javascript
node.js学习总结之调式代码的方法
Jun 25 #Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 #Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 #Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 #Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
自制PHP框架之设计模式
2017/05/07 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
Python中的字典遍历备忘
2015/01/17 Python
解决Python传递中文参数的问题
2015/08/04 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python WSGI的深入理解
2018/08/01 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python接口开发实现步骤详解
2020/04/26 Python
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
医德医风学习心得体会
2016/01/25 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
Python面试不修改数组找出重复的数字
2022/05/20 Python