JQuery插件之ajaxFileUpload

最新推荐文章于 2022-11-22 10:45:38 发布
最新推荐文章于 2022-11-22 10:45:38 发布
阅读量196 收藏
点赞数
分类专栏： javascript
J Query插件之ajaxFileUpload

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。

我用的是这个:https://github.com/carlcarl/AjaxFileUpload 

下载地址在这里：http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar

AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。

当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我很喜欢。

评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。

ajaxFileUpload是一个异步上传文件的jQuery插件

　　传一个不知道什么版本的上来，以后不用到处找了。

　　语法：$.ajaxFileUpload([options])

　　options参数说明：

1、url　　　　　　　　　　  上传处理程序地址。　　
2，fileElementId　　　　　  需要上传的文件域的ID，即<input type="file">的ID。
3，secureuri　　　　　　　 是否启用安全提交，默认为false。 
4，dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error　　　　　　　　　 提交失败自动执行的处理函数。
7，data 　　　　　　　　　 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 　　　　　　　　　  当要提交自定义参数时，这个参数要设置成post

错误提示:

1，SyntaxError: missing ; before statement错误
　　如果出现这个错误就需要检查url路径是否可以访问
2，SyntaxError: syntax error错误
　　如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3，SyntaxError: invalid property id错误
　　如果出现这个错误就需要检查文本域属性ID是否存在
4，SyntaxError: missing } in XML expression错误
　　如果出现这个错误就需要检查文件name是否一致或不存在
5，其它自定义错误
　　大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

 

　　使用方法：

　　第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

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

　　第二步：HTML代码：

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

　　第三步：JS代码

复制代码 
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/upload.aspx', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'file1', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>
复制代码

　　　　第四步：后台页面upload.aspx代码：

复制代码 
        protected void Page_Load(object sender, EventArgs e)
        {
            HttpFileCollection files = Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
            if (files.Count > 0)
            {
                files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小为:" + files[0].ContentLength;
                imgurl = "/" + files[0].FileName;
                string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                Response.Write(res);
                Response.End();
            }
        }
复制代码

　　本实例完整代码下载

来一个MVC版本的实例：

控制器代码

复制代码 
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Upload()
        {
            HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
            string imgPath = "";
            if (hfc.Count > 0)
            {
                imgPath = "/testUpload" + hfc[0].FileName;
                string PhysicalPath = Server.MapPath(imgPath);
                hfc[0].SaveAs(PhysicalPath);
            }
            return Content(imgPath);
        }
    }
复制代码

 

前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到<img>的SRC地址

复制代码 
<html>
<head>
    <script src="/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                if ($("#file1").val().length > 0) {
                    ajaxFileUpload();
                }
                else {
                    alert("请选择图片");
                }
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/Home/Upload', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'HTML', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        alert(data);
                        $("#img1").attr("src", data);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>
</head>
<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>
复制代码

 最后再来一个上传图片且附带参数的实例：控制器代码：

复制代码 
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Upload()
        {
            NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

            HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
            string imgPath = "";
            if (hfc.Count > 0)
            {
                imgPath = "/testUpload" + hfc[0].FileName;
                string PhysicalPath = Server.MapPath(imgPath);
                hfc[0].SaveAs(PhysicalPath);
            }
            //注意要写好后面的第二第三个参数
            return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
        }
    }
复制代码

Index视图代码:

复制代码 
<html>
<head>
    <script src="/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                if ($("#file1").val().length > 0) {
                    ajaxFileUpload();
                }
                else {
                    alert("请选择图片");
                }
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/Home/Upload', //用于文件上传的服务器端请求地址
                    type: 'post',
                    data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        alert(data);
                        $("#img1").attr("src", data.imgPath1);
                        alert("你请求的Id是" + data.Id + "     " + "你请求的名字是:" + data.name);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>
</head>
<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>
复制代码

此实例在显示出异步上传图片的同时并弹出自定义传输的参数。本实例下载地址

　　2013年1月28日，今天调试过程中发现一个问题，就是作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" id="file1" name="file1" />

　　2013年1月28日，最经典的错误终于找到原因所在了。Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'，这个是google浏览器报的错误，非常经典， 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：dataType参数一定要大写。如：dataType: 'HTML'。

　　2016-07-28，评论中的一个错误：TypeError: $.ajaxFileUpload is not a function   我们用的不是同一个JS，你下了别的AJAXFileUpload去了。

------------------------------------------------------------------------------------------------------------------------------

html代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<p>
<label>ajax上传</label>
<input type= "file" name= "fileToUpload" id= "fileToUpload" class= "inp_fileToUpload" multiple= "multiple" />
<img src= "$web.site$web.tpl#**#adminht/images/lb_head.jpg" width= "30px" height= "30px" class= "img_upload" id= "img" />
</p>
<p>
<label>最新修改人员：</label>
<input readonly= "readonly" type= "text" size= "30" />
</p>
<div>
 
<script type= "text/javascript" >
$( function () {
$( ".inp_fileToUpload" ).live( "change" , function () { //现在这个已经适用于多个file表单。
ajaxFileUpload($( this ).attr( "id" ), $( this ).parent().children( ".img_upload" ).attr( "id" ));
})
})
function ajaxFileUpload(file_id, img_id) {
jQuery.ajaxFileUpload({
url : '/upload/upload_json.ashx' , //用于文件上传的服务器端请求地址
secureuri : false , //是否需要安全协议，一般设置为false
fileElementId : file_id, //文件上传域的ID
dataType : 'json' , //返回值类型 一般设置为json
success : function (data, status) //服务器成功响应处理函数
{
if (data.error == 0) {
$( "#" + img_id).attr( "src" , data.url);
} else {
alert(data.message);
}
},
error : function (data, status, e) //服务器响应失败处理函数
{
alert(e);
}
})
return false ;
}
</script>
</div>
</div>


烟花易冷繁华落
关注
专栏目录
后台学习六---ajaxFileupload文件上传下载
lxfHaHaHa的博客
04-24 2598
这一章讲讲文件的上传下载，这里我们使用ajax的上传文件方法。 ps：基于maven的springmvc框架都已经搭建好了的，如有问题，参考 ： 后台学习一—spring+maven+mybatis+mysql+junit整合1. 上传1.1 ajaxFileupload.js具体的功能js都已经封装好了，我们直接把js文件下过来使用，地址： http://download.csdn.net
方便自己下载的ajaxfileupload.js备份
02-25
1、jquery异步上传图片 2、js前端异步上传图片 3、下载免费 4、功能已测试可以使用
jQuery插件之ajaxFileUpload
ajwqb06628的专栏
12-15 540
jQuery插件之ajaxFileUpload ajaxFileUpload.js 很多同名的，因为做出来一个很容易。 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里：http://files...
AjaxFileUpload实现文件异步上传(AjaxFileUpload.js文件下载及参数介绍)
s343174147的博客
02-26 299
AjaxFileUpload实现文件异步上传效果更好，使用简单：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &l
使用ajaxfileupload.js插件批量导入文件
热门推荐
砖家穴者叫兽的博客
02-13 1万+
1.下载ajaxfileupload.js文件，并且修改其中的方法： createUploadForm: function(id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; ...
jQuery插件AjaxFileUpload实现ajax文件上传
01-21
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。 1、引入AjaxFileUpload插件相关的js 复制代码 代码如下:[removed]resources/js/...
Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
10-21
*** MVC与JQuery插件ajaxFileUpload结合使用进行文件上传是现代Web开发中一个非常常见的功能。本文主要阐述了如何在*** MVC框架中利用JQuery的ajaxFileUpload插件来实现异步文件上传功能。 首先，ajaxFileUpload是...
jQuery插件ajaxFileUpload使用详解
01-21
AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。 当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我...
jQuery插件ajaxFileUpload使用实例解析
11-28
jQuery插件`ajaxFileUpload`是一个专用于异步文件上传的解决方案，其设计思路是通过创建隐藏的表单和IFrame来实现JavaScript提交文件，同时返回服务器的响应数据。这个插件并非官方jQuery库的一部分，而是由开发者...
Jquery上传插件文件ajaxfileupload.js 修复版下载
09-28
使用Jquery做上传文件处理时，用到了ajaxfileupload.js 这个第三方代码，但是这个js几乎就是半成品，问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题： 1：无法带参数提交，只能上传文件； 2：运行时报：jQuery.handleError is not a function 错误； 3：执行成功后，始终指向error方法处理，无法执行sucess方法； 解决方法： 1：无法带参数提交，只能上传文件； 原作者一定是把这个代码当作练习来写的，只完成了文件提交这个功能。需要对代码做些许修改即可。有两处修改： 第一处是将原createUploadForm: function(id, fileElementId) 方法添加一个data参数，并将data中的数据拼接进去即可 第二处 是调用createUploadForm方法地方 2：运行时报：jQuery.handleError is not a function 错误； 这个错误是由于ajaxfileupload.js 是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError 方法，所以可以将1.4.2版本中的该方法复制到该js中 3：执行成功后，始终指向error方法处理，无法执行sucess方法； 这个是由于ajaxfileupload.js 处理返回data的时候，没有考虑后台返回的是字符串的问题(即使返回的JSON格式数据，我们也大多喜欢转化为字符串来返回)
不用form提交表单，用ajax上传文件
05-22
不用form提交表单，用ajax异步上传文件，使用jdk8版本，否则可能无法运行
ajaxfileupload.js
02-17
ajaxfileupload.js是实现页面无刷新上传文件的一个插件
Ajaxfileupload.js
06-24
javascript文件上传插件，Ajaxfileupload.js，官方下载版
ajaxfileupload
04-22
JQ异步上传图片插件，可以运用这个插件实现异步上传
ajaxfileupload带参数上传文件
最新发布
代码笔记
11-22 1221
$.ajaxFileUpload( { url: '/controller/action', secureuri: false, data: { 'name': 'Tom', //'参数名称':'参数值' }, ... ... }
jQuery插件AjaxFileUpload 例子
Johnny_L_Q的专栏
11-21 299
AjaxFileUpload.js下载地址: [url]http://www.phpletter.com/Our-Projects/AjaxFileUpload/[/url] Jquery.js下载地址: [url]http://jquery.com/[/url] 页面代码： [code="java"] ...
使用ajaxFileUpload插件上传带中文名称的上传和下载问题
陪你听风的博客
06-06 1272
1.上传时的问题: 当选择好文件上传时，服务器的左上角会一直转个不停，原因是因为js中$.ajaxFileUpload的方法的url中写成了.do,改为.json即可。 2.下载时的问题： 当页面给好文件url的路径时（路径最好是绝对路径），点击后依然“地址不存在”。找到tomcat的文件夹下的server.xml文件，把xml中两个的标签里面加上URIEncoding="u
ajaxfileupload.js上传文件
一只喜欢学习的猪仔
08-24 601
我在原有springmvc的web项目上新建jsp页面：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServer
jQuery插件ajaxFileUpload使用及错误处理解析
"jQuery插件ajaxFileUpload的使用方法和注意事项" 在Web开发中，实现文件的异步上传是一项常见的需求，jQuery插件ajaxFileUpload就是为了满足这一需求而存在的。它提供了一个简单易用的API，使得开发者能够在不刷新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值