一个简单的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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python sys.argv用法实例
2015/05/28 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
phpquery中文手册
2021/03/18 PHP
经济学人订阅:The Economist
2018/07/19 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
学生实习自我鉴定
2013/10/11 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
关于责任的演讲稿
2014/05/20 职场文书
飞屋环游记观后感
2015/06/08 职场文书
让生命充满爱观后感
2015/06/08 职场文书
法人代表证明书范本
2015/06/18 职场文书
催款函范本大全
2015/06/24 职场文书