首页 > 代码库 > 图片上传及显示（包含多文件）

图片上传及显示（包含多文件）

2024-08-13 04:42:19   215人阅读

前一段时间用到文件上传，好久没有写这个东西，有的东西也忘记了。所以本篇博客ＢＺ决定记载一下，一方面自己回顾加深一下，另一方面供各位程序员学习。

希望大神们对本文不对的地方进行批评指正！

先在我们的html页面写上上传文件的文本框及图片显示所在的DIV，如下：

技术分享
 1 <div class="form-group"> 2                             <label class="col-sm-2 control-label no-padding-right" id="lb_topimg"> 顶部图片： </label> 3                             <div class="col-sm-4"> 4                                 <a href=http://www.mamicode.com/"javascript:;" class="a-upload"> 5                                     <input type="file" id="topimg" name="topimg" onchange="ajaxFileUpload(‘topimg‘, ‘img_topimg‘,2)">点击这里上传图片 6                                 </a><span style="color:#EC2020;font-size:10px">[ 建议上传图片208px*160px ]</span> 7                             </div> 8                             <div class="col-sm-3" id="img_topimg"> 9 10                             </div>11                         </div>
View Code

BZ在图片上传用到了Ajax，并且传多去三个参数，下面粘上js调用代码块：

技术分享
 1 function ajaxFileUpload(id, contentid,imgid) { 2     $.ajaxFileUpload 3     ( 4         {//<input type="file" id="farmlogo" name="farmlogo" onchange="ajaxFileUpload(‘farmlogo‘, ‘img_farmlogo‘,1)"> 5             url: ‘../Handler/DataHandler.ashx‘, //用于文件上传的服务器端请求地址 6             secureuri: false, //一般设置为false 7             fileElementId: id, //文件上传空间的id属性  <input type="file" id="file" name="file" /> 8             //dataType: ‘json‘, //返回值类型 一般设置为json 9             success: function (data, status)  //服务器成功响应处理函数10             {11                 var obj = eval(‘(‘ + $(data).text() + ‘)‘);12                 $("#" + contentid).html("");13                 $("#" + contentid).append("<div class=‘open‘ style=‘width:100px;height:50px;float:left;‘><img id=‘uploadimg_" + contentid + imgid "‘ class=‘img-responsive‘  style=‘width:100px;height:50px;‘ src=http://www.mamicode.com/‘" + obj.msg.PicUrl + "‘ /><img style=‘position:relative;right:6px;float:right‘ src=http://www.mamicode.com/‘/Images/del.gif‘ onclick=‘RemoveImg(this);‘ border=‘0‘ />
"+ contentid + imgid "‘ name=‘imgurl" + imgid + "‘ value=http://www.mamicode.com/‘" + obj.msg.PicUrl + "‘ type=‘hidden‘/>")14 },15 error: function (data, status, e)//服务器响应失败处理函数16 {17 alert(e);18 }19 }20 )21 return false;22 }
View Code

在这里给大家介绍一下上传三个参数的原因：input的id是为了区分图片的分组情况（假设要上传所需的两组图片），div的id是确定图片将显示在哪个div中。

附上服务器端请求地址代码块：

技术分享
public void ProcessRequest(HttpContext context)        {            //context.Response.ContentType = "text/plain";            //context.Response.Write("Hello World");                     //在此处写入您的处理程序实现。            HttpFileCollection files = context.Request.Files;            if (files != null && files.Count > 0)            {                HttpPostedFile file = files[0];                string tmpPath = context.Server.MapPath("/Upload/");                string fileName = DateTime.Now.ToString("yyyyMMddHHmissfff") + System.IO.Path.GetFileName(file.FileName);                file.SaveAs(tmpPath + fileName);                context.Response.Clear();                context.Response.Write(@"{                    status : ‘success‘,                     msg: {                         PicUrl : ‘" + "/upload/" + fileName + @"‘                    }                }");                context.Response.End();            }        }
View Code

图片的命名格式是以年月日+图片的名称。Upload是将图片上传在Upload文件夹里。

看到这里大家应该都明白，重点来了！！！

多图片上传呢？？其实很简单，就是将第二段代码块中的一句话注释掉就OK！

$("#" + contentid).html("");

即将图片所在的div不再清空！！

可以写一个js规定图片路径的储存，运用循环的方式将选择的图片路径保存在数据库！大功告成！

感谢大家关观看本篇博客，希望更多和我一样的小菜积极学习，同样希望大神们对本篇博客的不足之处提出意见！谢谢大家！

 

图片上传及显示（包含多文件）


联系
我们