文件上传带缩略图

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

效果

点击上传