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 + "\" }");
阅读全文
0 0
- h5 input控件 多文件上传
- Input控件上传文件
- Ajax Input控件上传文件
- C#多文件上传,客户端input file控件
- input 多文件上传
- input多文件上传
- 通过button控制input控件上传文件
- 上传文件input file控件,注意事项
- input标签多文件上传
- php用h5实现多文件上传
- Atitit .h5文件上传
- H5原生文件上传
- H5上传文件file
- h5文件分块上传
- input上传控件美化
- H5页面上传图片控件
- 自定义input[file](文件上传控件)样式-兼容IE6
- 使用input代替服务器控件FileUpload实现文件上传
- QGC的第二个按钮Vehicle Setup
- 解决多线程访问全局变量的解决方案
- nginx+uwsgi+django(restframework)服务器部署
- 不要滥用递归
- SHA-1
- h5 input控件 多文件上传
- Java File类的简单说明与使用 -- Java 基础
- iis http重定向https
- Java调优经验谈--转
- SQL执行查询时出现返回数据为空的问题
- 自定义控件 RoundImageView
- RobotFrameWork(十)Remote远程库使用
- 不root安卓手机,通过wifi截图
- 前端项目总结