asp.net使用ajaxFileUpload插件上传文件（附源码）

2024-10-09 13:52:08

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

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

下载地址在这里：http://xiazai.jb51.net/201701/yuanma/ajaxfileupload(jb51.net).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>

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

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

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

到此这篇关于asp.net使用ajaxFileUpload插件上传文件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://xiazai.jb51.net/201611/yuanma/ajaxfileupload(jb51.net).rar. 整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐
asp.net+ajaxfileupload.js 实现文件异步上传代码分享

由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码代码如下: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val("");
asp.net使用ajaxFileUpload插件上传文件（附源码）

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201701/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
asp.net fileupload控件上传文件与多文件上传

1.前台文件 Default.aspx: <%@ Page Language="C#" AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
Vue移动端右滑屏幕返回上一页附源码下载

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验.Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件.使用它可以轻松实现屏幕触控.滑动触发事件,提高用户体验.本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页. 查看演示下载源码安装依赖使用npm安装vue-directive-touch组件. npm install vue-directive-touch --save 引入组件在main.js中引入vue-directive-touch.
jQuery插件ajaxFileUpload异步上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
解析ajaxFileUpload 异步上传文件简单使用

这里就简单介绍下ajaxFileUpload,jQuery插件AjaxFileUpload可以实现ajax文件上传.我们的项目采用的是jsp跟js分离的架构,所以代码如下. 首先是jsp部分:  <input type="file" name="n_file" id="fileToUpload" value="上传表格"
Dropzone.js实现文件拖拽上传功能(附源码下载)

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示源码下载使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
在ASP.NET中支持断点续传下载大文件(ZT)源码

IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传的下载: Accept-Ranges:告知下载客户端这是一个可以恢复续传的下载,存放本次下载的开始字节位置.文件的字节大小: ETag:保存文件的唯一标识(我在用的文件名+文件最后修改时间,以便续传请求时对文件进行验证): Las
ASP.NET通过Remoting service上传文件

最近在因为在学习Remoting,纯粹只是了解一下,发现Remoting确实是好东西. 我们通常有三种方式来使用remoting,一种是第一种:Publishing a public object公开的对象创建在本地第二种:Remote creation of a public object (SAO)对象创建在客户端请求中第三种:Remote creation of a private object (CAO)对象创建在HOST上,客户端引用服务器上的对象目次我也没有很好理解这三种的本质区
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】

本文实例讲述了jQuery实现的响应鼠标移动方向插件用法.分享给大家供大家参考,具体如下: HTML代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=de
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明需要使用jQuery库文件和AjaxFileUpload库文件使用实例一,包含文件部分复制代码代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

asp.net使用ajaxFileUpload插件上传文件（附源码）

相关推荐

随机推荐