C# 结合html5 批量上传文件和图片预览

本文介绍如何使用HTML5实现多文件选择与上传功能,并通过JavaScript进行实时预览。此外,还提供了C#后端处理代码示例,包括文件格式验证、大小限制及保存等操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html5 新特性 
 
 <input id="imgsf" type="file" name="imgsf" multiple  />
 
input  file 中增加 multiple   属性可以选择多文件。IE9以下版本不兼容
 
 
    <form id="form1" method="post" action="upload_json.ashx" enctype="multipart/form-data">
    <div>
     <input id="imgsf" type="file" name="imgsf" multiple  />
        <input type="text" name="ceshi" value="panlitao" >
        <input type="submit" value="提交" />
    </div>
    </form>
 
 
//预览js
 
  <div id="imgrq">
    </div>
     <script type="text/javascript">
      
 
 
         $("#imgsf").change(function () {
             var filedx = 0;
             for (var i = 0, j = this.files.length; i < j; i++) {
                 $("#imgrq").append("<img  src=\"" + window.URL.createObjectURL(this.files[i]) + "\" width=\"100\" height=\"100\" />");
             }
 
 
         });
 
 
    </script>
 
C# 代码
 
 public class upload_json : IHttpHandler
    {
       // private HttpContext context;
 
 
        public void ProcessRequest(HttpContext context)
        {
            String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);
 
 
            //文件保存目录路径
            String savePath = "attached/";
 
 
            //文件保存目录URL
            String saveUrl = aspxUrl + "attached/";
 
 
            //定义允许上传的文件扩展名
            Hashtable extTable = new Hashtable();
            extTable.Add("image", "gif,jpg,jpeg,png,bmp");
            //extTable.Add("flash", "swf,flv");
            //extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
            //extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
 
 
            //最大文件大小
            int maxSize = 1000000;
          //  this.context = context;
            String newFileName = "";
            for (int i = 0; i < context.Request.Files.Count;i++ )
            {
                HttpPostedFile imgFile = context.Request.Files[i];
          
 
 
 
 
 
 
                if (imgFile == null)
                {
                    showError("请选择文件。");
                }
 
 
                String dirPath = context.Server.MapPath(savePath);
                if (!Directory.Exists(dirPath))
                {
                    showError("上传目录不存在。");
                }
 
 
                String dirName = context.Request.QueryString["dir"];
                if (String.IsNullOrEmpty(dirName))
                {
                    dirName = "image";
                }
                if (!extTable.ContainsKey(dirName))
                {
                    showError("目录名不正确。");
                }
 
 
                String fileName = imgFile.FileName;
                String fileExt = Path.GetExtension(fileName).ToLower();
 
 
                if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
                {
                    showError("上传文件大小超过限制。");
                }
 
 
 
 
                //修改为文件流去判断文件格式
                // string exPath = mall_bll.Common.isfilltype(stream: imgFile.InputStream).ToLower();
 
 
                //  if (exPath != "jpg" && exPath != "gif" && exPath != "bmp" && exPath != "png")
                //   { showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。"); }
 
 
                //if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1)
                //{
                //    showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");
                //}
 
 
                //创建文件夹
                dirPath += dirName + "/";
                saveUrl += dirName + "/";
                if (!Directory.Exists(dirPath))
                {
                    Directory.CreateDirectory(dirPath);
                }
                String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
                dirPath += ymd + "/";
                saveUrl += ymd + "/";
                if (!Directory.Exists(dirPath))
                {
                    Directory.CreateDirectory(dirPath);
                }
 
 
                 newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
                String filePath = dirPath + newFileName;
 
 
                imgFile.SaveAs(filePath);
            }
            String fileUrl = saveUrl + newFileName;
 
 
            Hashtable hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = fileUrl;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
         //   context.Response.Write(JsonMapper.ToJson(hash));
            context.Response.End();
        }
 
 
        private void showError(string message)
        {
            Hashtable hash = new Hashtable();
            hash["error"] = 1;
            hash["message"] = message;
         //   context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
         //   context.Response.Write(JsonMapper.ToJson(hash));
       //     context.Response.End();
        }
 
 
        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值