Jquery.uploadview Implement picture preview upload

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.