提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

Asp.net2.0无刷新图片上传显示缩略图具体实现

ASP上传 实现 图片 显示 刷新 具体 缩略图
2023-06-13 09:15:01 时间

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

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

第一步：我们需要加载几个JS库。
jquery库。
jquery.form.js库。

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

以下为页面中JS代码：

复制代码代码如下:

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

第二步：一般处理程序内的代码
复制代码代码如下:

 publicvoidProcessRequest(HttpContextcontext)
   {
       HttpFileCollectionfiles=context.Request.Files;             //From中获取文件对象
       if(files.Count>0)
       {
            stringpath="";                                                           //路径字符串
           Randomrnd=newRandom();
           for(inti=0;i<files.Count;i++)
           {
               HttpPostedFilefile=files[i];                                       //得到文件对象
               if(file.ContentLength>0)
               {
                   stringfileName=file.FileName;
                   stringextension=Path.GetExtension(fileName);
                   intnum=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中的任意位置。想来都是可以实现的。
复制代码代码如下:
   <imgid="server_img"width="360px"style="border:1pxsolid#ccc;padding:2px;"  title=""alt=""/>  //用于回显图片
   <asp:FileUploadID="Up_load"runat="server"onchange="upload()" ontextchange="upload()"/>       //上传图片，自动的，两个事件是为了保证所有浏览器都兼容。

相关文章