图片上传ajaxFileUpload使用

来源：互联网发布：蓝鸽集团java很坑人吗编辑：程序博客网时间：2024/06/05 15:20

ajaxFileUpload使用方法：

　　第一步：先引入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>

阅读全文

0 0