多图片上传并预览

js相关代码

一种是form表单提交，一种是base64 

//多文件上传
function fileClick() {
    //在input file内容改变的时候触发事件
    $('#filed').change(function () {
        if ($('.trphoto td img').length === 3) {
            alert("至多只能上传3张图片!请先点击图片删除!"); return
        }
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
        var file = $('#filed').get(0).files[0];
        var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
        if (!pattern.test(file.type)) {
            alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
            //file.focus();
            return;
        }
        //debugger
        $("#mmzpfile").ajaxSubmit({
            url: "JZ_ZY_ZZ_UPDATE.aspx",
            type: "post",
            data: { "action": "upfile_IMG" },
            resetForm: "true",
            beforSubmit: function () {
            },
            success: function (msg) {
                $(".trphoto td").append("<img onclick=\"zzxximg(this)\" title=\"点击图片删除\" src=\"" + msg + "\" style=\"width:200px;border:1px solid #8FADD1;\"></img>")
                $(".trphoto").show()
                BAMMZP += msg + "|"
            }
        })

        //创建用来读取此文件的对象
        //var reader = new FileReader();
        使用该对象读取file文件
        //reader.readAsDataURL(file);
        读取文件成功后执行的方法函数
        //reader.onload = function (e) {
        //    //读取成功后返回的一个参数e，整个的一个进度事件
        //    //console.log(e);
        //    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
        //    //的base64编码格式的地址
        //    //debugger
        //    $(".trphoto td").append("<img onclick=\"zzxximg(this)\" title=\"点击图片删除\" src=\"" + reader.result + "\" style=\"width:200px;border:1px solid #8FADD1;\"></img>")
        //    $(".trphoto").show()
        //    BAMMZP += reader.result + "|"
        //}
    })

}

function zzxximg(thiss) {
    if (confirm("确认删除吗")) {
        var hcnr = $(thiss).attr("src");
        //var RYHCID = $("#RYHCID").val();
        //var HCBT = $(thiss).parent().parent().children().eq(0).html();
        $(thiss).remove();
        BAMMZP = BAMMZP.replace(hcnr + "|", "");
    }
}

html

<!--门面照片-->
            <tr class="mmzp">
              <td class="zuzhi-tabletd" colSpan="2">
                <span style="color:red">*</span>门面照片
              </td>
              <td class="zuzhi-tabletd" colSpan="2">
                <form id="mmzpfile">
                  <div id="pox">
                    <input type="file" id="filed" name="files"  class="file" accept="image/*"/>
                  </div>
                </form>
              </td>
            </tr>

后台cs

if (action == "upfile_IMG")
                {
                    System.Web.HttpPostedFile file = context.Request.Files["files"];
                    string colname = UploadPicture(file, context);
                    SYS_LOG.Log(context, Entity.Operation.上传图片, "保安从业单位上传图片");
                    return colname;
                }

        /// <summary>
        /// 上传图片
        /// </summary>
        /// <param name="file"></param>
        /// <param name="context"></param>
        /// <returns></returns>
        private string UploadPicture(System.Web.HttpPostedFile file, System.Web.HttpContext context)
        {
            try
            {
                string action = context.Request["action"];
                if (file == null)
                {
                    return "请上传文件！";
                }
                string FileName = Path.GetFileName(file.FileName);
                string Extension = Path.GetExtension(FileName);
                //判断文件类型
                if (action == "upfile_IMG")
                {
                    //判断是否为图片文件
                    if (!Extension.Equals(".png") && !Extension.Equals(".jpg"))
                    {
                        string url = "请选择图片文件（*.png,*.jpg）";
                        return url;
                    }
                }
                int ContentLength = file.ContentLength;
                if (ContentLength > MaxSize)
                {
                    return "文件的大小超过限制15M最大上传15M以内的文件！";
                }

                //创建文件夹
                String Folder = "NewFile";
                String Dates = DateTime.Now.ToString("yyyyMMdd");
                String MapPath = context.Server.MapPath("~/");

                MapPath += Folder + "\\";

                String MapPathtwo = "";
                MapPathtwo = MapPath + Dates + "\\";

                if (!Directory.Exists(MapPathtwo))
                {
                    Directory.CreateDirectory(MapPathtwo);
                }

                string FileNameWithOutExtension = Path.GetFileNameWithoutExtension(FileName);

                FileNameWithOutExtension += "_" + DateTime.Now.ToString("yyyyMMddHHmss");
                string newFileName = FileNameWithOutExtension + Extension;

                //上传文件
                file.SaveAs(MapPathtwo + newFileName);

                string HJSQ = Folder + "/" + Dates + "/" + newFileName;

                if (action == "upfile_IMG")
                {
                    return HJSQ;
                }
                else
                {
                    return "";
                }

            }
            catch (Exception ex)
            {
                SYS_LOG.Log(context, Entity.Operation.上传图片, "保安从业人员上传图片-" + ex);
                return "上传失败";
            }
        }