h5 input控件 多文件上传

来源:互联网 发布:乐器软件 编辑:程序博客网 时间:2024/06/08 12:37
<form name="frm" id="frm" method="post"><div class="frmItms"><label class="frmItmsName">名称</label><input id="dName" class="txt1 txt4" name="dName" type="text"></div><div class="frmItms"><label class="frmItmsName" style="vertical-align:top"></label><div style=" display:inline-block; background:green;"><input id="fileTag" class="fileTag" type="file" name="fileTag" multiple="multiple" accept="image/png,image/gif,image/jpg,image/jpeg" /><input type="hidden" id="picsSrc" name="picsSrc" /><span id="upPic" class="btn4" style="border:solid 1px #ccc">上传图片</span></div></div><div class="frmItms" style="margin-top:0"><label class="frmItmsName" style="vertical-align:top"></label><div id="showPic" class="frmItmCnt"></div></div><div class="frmItms"><label class="frmItmsName"></label><input id="sbmt" type="button" class=btn2 value="提 交" /></div></form><script>    $('input.fileTag').change(function(){        var oFiles = $(this).get(0);        var formData = new FormData();        if(oFiles.files.length >=10){alert('最多上传10张图片.'); oFiles.value=''; return;}        for (var i = 0, file; i < oFiles.files.length; i++) {            file = oFiles.files[i];            if (file.type.indexOf("image") == 0) {if (file.size >= 512000) {alert('"'+ file.name +'" 图片文件过大,已跳过,应小于5M');} else {formData.append('files', file);}} else {alert('文件 "' + file.name + '" 不是图片,已跳过。');}}        if(!formData.has('files')){ return}  //如果控件为空$.ajax({url: "/admin/upLoad/upPic.ashx",type: "POST",processData: false,contentType: false,data: formData}).done(function (d) {            if (d.toString() != ''){  doResult(d); } else { alert('返回参数错误'); }        }).fail(function (jqXHR, textStatus, errorThrown) { alert(errorThrown); });    });    function doResult(jsnObj){        if(jsnObj.status == '0'){alert(jsnObj.result.toString());}        else if(jsnObj.status == '1'){            var picArr = new Array();            picArr = jsnObj.result.toString().split(',');            if(picArr.length > 0){                $.each(picArr, function(i,v){                    if(v.indexOf('.') >= 0){                        $('#showPic').append('<div class="smallImgCnt"><img src="' + v + '" class="smallImg" /></div>');                    }                });            }        }    }    function getPicsSrc(){        var pics = new Array();        $.each($('#showPic img.smallImg'), function(){            pics.push($(this).attr('src'));        });        //console.log(pics);        $('#picsSrc').val(pics.join(','));    }    $(document).on('mouseenter', '.smallImgCnt',function(){$(this).prepend('<i class="delPic"></i>').addClass('smallImgCntBg');});    $(document).on('mouseleave', '.smallImgCnt',function(){$(this).find('i.delPic').remove().end().removeClass('smallImgCntBg');});    $(document).on('click', 'i.delPic',function(){$(this).parent('.smallImgCnt').remove();});    $('.fileTag').hover(function(){$(this).siblings('.btn4').addClass('btn4_')},function(){$(this).siblings('.btn4').removeClass('btn4_')});</script>

后台部分:

context.Response.ContentType = "text/json";HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;string status = "1";string result = "";StringBuilder sb = new StringBuilder();var r = new Random();

for (int i = 0; i < files.Count; i++){ HttpPostedFile file = files[i];

 ... }

if (result == ""){ result = sb.ToString(); if (result.Length > 1) {  result = result.Substring(0, result.Length - 1); }}

context.Response.Write("{\"status\":\"" + status + "\", \"result\":\"" + result + "\" }");



原创粉丝点击