Jquery.uploadview Implement picture preview upload

Image upload, there are many versions on the Web, today also to do a check a lot of finally found a uploadview made a change

Look at the code

@{Layout=NULL;}<! DOCTYPE html>"Viewport"Content="Width=device-width"/> <title>Index</title> <script src="~/scripts/jquery-1.8.2.min.js"></script> <script src="~/scripts/jquery.uploadview.js"></script>class="Shangchuan"> class="Js_uploadbox"style="position:relative"> <div id="Preview" class="Js_showbox"> "Imghead"Border="0"Src="http://static.neihanhongbao.com/highads/images/nologo.jpg"alt="Upload Image"style="width:100px; height:100px"/> </div> <input type="file"Name="file"Id="ID"style="position:absolute; top:0px; left:0px; height:100px; Filter:alpha (opacity:0); opacity:0; width:100px"onclick="Upload ()"> </div> <input type="Hidden"Id="hidtmp_id"Name="tmp_id"Value=""/> </div> </div></body>"Text/javascript">function Upload () {$ ("#id"). Uploadview ({uploadbox:'. Js_uploadbox',//set up the Upload box containerShowbox:'. Js_showbox',//set up a container to display preview PicturesWidth' -',//Preview picture width, Unit pxHeight' -',//the height of the preview image, in pixels per pxAllowtype: ["gif","JPEG","jpg","BMP","PNG"],//types of images allowed to uploadMaxSize:1,//maximum size allowed for uploading images, Unit mSuccess:function (e) {varL = $ (". Js_showbox img"). attr ("src"); $("#hidTmp_ID"). Val (l);    }        }); }</script>

Code The foreground looks very simple.

The implementation of the effect is also possible, but this save is a picture of Base64, inserted into the database when we are generally saved xxxx.jpg need to implement a method

 /// <summary>        ///base64 Turn Picture/// </summary>        /// <returns></returns>         Public Static stringBasetoimg (stringbaseimg) {            byte[] bt = Convert.frombase64string (baseimg. Replace ("Data:image/jpeg;base64,","")); stringfilepath ="Imgserver".            Getappsetting (); stringSqlurl =@""+ DateTime.Now.ToString ("YYYYMMDD") +"\\"; stringSqlname =""+ DateTime.Now.ToString ("yyyymmddhhmmssmsfff") +". jpg"; if(! System.IO.File.Exists (filepath +Sqlurl)) {System.IO.Directory.CreateDirectory (filepath+Sqlurl); System.IO.File.WriteAllBytes (filepath+ Sqlurl +Sqlname, BT); }            returnSqlurl +Sqlname; }

Here I grouped the folders according to the date and saved to the database. Avoid a single file too large

Like this

This also applies to mobile phones.

Forgot to attach the download link: http://pan.baidu.com/s/1boMcO6j

Jquery.uploadview Implement picture preview upload