File upload with thumbnail image

Lead Ajaxfileupload.js Plug-in

<style>

File setting Style: Change to transparent, then let DD set the style to replace him;
If you need to show small hands when hovering, set the font-size to 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>

<Divclass= "Uploadimg"> 　　 <DLclass= "Left"> 　　　　 <DT><imgwidth= "the"Height= "The "ID= "Imghead"Data-bind= "attr: {src:saleInfoInput.SealPath}"src= "~/content/images/_register/uploadimg.png" /></DT> 　　　　 <DD>Click Upload<inputDisabled Class= "Prove"value= "Click to upload"ID= "File1"name= "File1"type= "File"Accept= "Image/png,image/gif,image/jpeg,image/x-ms-bmp"onchange= "Ajaxfileupload (' file1 ', ' hiddensrc ', ' Imghead ')" /></DD> 　　 </DL> 　　 <spanclass= "Uploadimg_list Left">Support for. jpg. jpeg. bmp. gif. png format photo proposal not exceeding 3M</span></Div>

<script>functionajaxfileupload (Fileelementid, HIDDENSRC, Imghead) {$.ajaxfileupload ( {URL:'/uploadfile/upload ',//server-side request address for file uploadsSecureuri:false,//whether a security protocol is required, generally set to falseFileelementid:fileelementid,//ID of the file upload domainDataType: ' Text ',//The return value type is generally set to JSONSuccessfunction(data, status)//Server Success Response handler function                        {                            vararr = Data.split (' {')); vars = Arr[1].split (' < ')); varJSON = "{" + s[0]; varSource = eval (' (' + JSON + ') '); if(source. Success) {varPICTIURESRC =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)//Server Response Failure handler function{alert (e); }                    }                )                return false; }        </script>

Effect

Click Upload

File upload with thumbnail image