首页 > 代码库 > 文件上传带缩略图
文件上传带缩略图
提前引 ajaxfileupload.js 插件
<style>
//file设置样式:变透明,然后让dd设置样式代替他;
如果悬浮时需要显示小手,将font-size设置成0
.uploadImg dl dd{ width:110px;height:31px;line-height:30px;background:#f56d66;border:none;color:#fff;border-radius:3px;margin-top:11px;text-align:center;cursor:pointer;}
.uploadImg .Prove{ position: absolute;bottom:0;left:0; opacity: 0; filter:Alpha(opacity=0); width:110px;height:31px;cursor:pointer;font-size:0 } .uploadImg_list{width:228px;}
</style>
<div class="uploadImg"> <dl class="left"> <dt><img width="112" height="86" id="imghead" data-bind="attr: { src: saleInfoInput.SealPath}" src="~/Content/images/_register/uploadImg.png" /></dt> <dd>点击上传<input disabled class="Prove" value="点击上传" id="file1" name="file1 " type="file" accept="image/png,image/gif,image/jpeg,image/x-ms-bmp" onchange="ajaxFileUpload(‘file1‘, ‘hiddenSrc‘, ‘imghead‘)" /></dd> </dl> <span class="uploadImg_list left">支持.jpg .jpeg .bmp .gif .png格式照片单张建议不超过3M</span> </div>
<script> function ajaxFileUpload(fileElementId, hiddenSrc, imghead) { $.ajaxFileUpload ( { url: ‘/UploadFile/Upload‘, //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: fileElementId, //文件上传域的ID dataType: ‘text‘, //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { var arr = data.split(‘{‘); var s = arr[1].split(‘<‘); var json = "{" + s[0]; var source = eval(‘(‘ + json + ‘)‘); if (source.Success) { var pictiureSrc =http://www.mamicode.com/ source.Data; //$("#"+hiddenSrc+"").val(pictiureSrc); $("#" + imghead + "").attr("src", ‘/UploadFile/GetImagefile?fileinfo=‘ + pictiureSrc + ‘&&type=s‘) if(fileElementId==""){ module.viewModel.saleInfoInput.BusinessLicensePath(""); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script>
效果
点击上传
文件上传带缩略图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。