h5 input控件多文件上传

最新推荐文章于 2024-07-12 09:12:08 发布

huanShion

最新推荐文章于 2024-07-12 09:12:08 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： asp.net

本文链接：https://blog.youkuaiyun.com/huanShion/article/details/77983158

asp.net 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在H5中使用input控件实现多文件上传功能，后台使用C#处理上传请求，将上传文件信息转化为JSON响应。

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

<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 + "\" }");