文件上传带缩略图

Posted 2020-09-23 小太阳wy927

提前引 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 = 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>

效果

点击上传