zoukankan      html  css  js  c++  java
  • Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

    简单三步实现图片无刷新上传:注意是上传,至于上传时的验证,比如图片的尺寸,大小,格式判断、限制等,自行解决。

    兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的。如果看到回显。当然就是成功了。

    经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了。真是煞费苦心啊。但是做出来的瞬间还是蛮开心的。

    第一步:我们需要加载几个JS库。

    jquery库

    jquery.form.js库

    下载这两个库,并引用到页面中。

    以下为页面中 JS 代码:

    function upload() {
        var options = {
            type: "POST",                            //当然这个是传送方式
            url: '../Include/Files.ashx',        //一般处理程序的路径
            success: function (msg) {        //返回的参数
                $("#server_img").attr("src", msg);            //回显图片。
            }
         };
         // 将options传给ajaxForm
         $('#aspnetForm').ajaxSubmit(options);
     }
    

    第二步:一般处理程序内的代码

    public void ProcessRequest(HttpContext context)
    {
            HttpFileCollection files = context.Request.Files;              // From中获取文件对象
            if (files.Count > 0)
            {
                 string path = "";                                                            //路径字符串
                Random rnd = new Random();
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];                                        //得到文件对象
                    if (file.ContentLength > 0)
                    {
                        string fileName = file.FileName;
                        string extension = Path.GetExtension(fileName);
                        int num = rnd.Next(5000, 10000);                            //文件名称
                        path = "../../UserFiles/temp/" + num.ToString() + extension;
                        file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));        //保存文件。
                    }
                }
                context.Response.Write(path);            //返回文件存储后的路径,用于回显。
            }
    }
    

    第三步:html或者aspx中的代码。
    以下两句代码随便插入html或者aspx中的任意位置。想来都是可以实现的。

    <img id="server_img" width="360px" style="border: 1px solid #ccc; padding: 2px;"   title="" alt="" />   //用于回显图片
    <asp:FileUpload ID="Up_load" runat="server" onchange="upload()"  ontextchange="upload()"/>  //上传图片,自动的,两个事件是为了保证所有浏览器都兼容。
    

      

  • 相关阅读:
    第4月第1天 makefile automake
    第3月30天 UIImage imageWithContentsOfFile卡顿 Can't add self as subview MPMoviePlayerControlle rcrash
    第3月第27天 uitableviewcell复用
    learning uboot fstype command
    learning uboot part command
    linux command dialog
    linux command curl and sha256sum implement download verification package
    learning shell script prompt to run with superuser privileges (4)
    learning shell get script absolute path (3)
    learning shell args handing key=value example (2)
  • 原文地址:https://www.cnblogs.com/netserver/p/4557701.html
Copyright © 2011-2022 走看看