For the sake of security performance, currently, JS does not support obtaining local images for preview. Just in a release box similar to QQ mood, I found many jquery plug-ins, few of them can meet the requirements, so you can use swfuplad to upload and preview this image.
First, paste the following plug-ins. You may be able to use other Image Upload functions.
1. jquery File Upload
Demo address: http://blueimp.github.io/jQuery-File-Upload/
The advantage is that jquery is used for asynchronous upload of images, which is controllable and can be customized as needed;
The disadvantage is that in some browsers such as ie9, image preview is not supported, and multi-file selection is not supported in the Image Selection box (this is why I abandoned it );
Public class thumbrix {// <summary> // generate a thumbnail /// </Summary> /// <Param name = "imgsource"> original image </param>/ // <Param name = "newwidth"> thumbnail width </param> /// <Param name = "newheight"> thumbnail height </param> /// <Param name = "iscut"> whether to crop (center point) </param> /// <returns> </returns> Public static image getthumbnail (system. drawing. image imgsource, int newwidth, int newheight, bool iscut) {int rwidth = 0; // The scaled width of int rheigh T = 0; // The height int swidth = imgsource after proportional scaling. width; // int sheight = imgsource. height; // Original Image Height double wscale = (double) swidth/newwidth; // Width Ratio Double hscale = (double) sheight/newheight; // high proportion double scale = wscale
2. Image Upload handler upload. ashx
Using system; using system. collections. generic; using system. LINQ; using system. web; using system. drawing; namespace mood {/// <summary> // Summary of upload /// </Summary> public class upload: ihttphandler {image thumbnail; public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; try {string id = system. guid. newguid (). tostring (); httppostedfile pai_image_upload = C Ontext. request. files ["filedata"]; image original_image = system. drawing. image. fromstream (pai_image_upload.inputstream); original_image.save (system. web. httpcontext. current. server. mappath ("~ /Files/"+ ID + ". jpg "); int target_width = 200; int target_height = 150; string Path =" files/files200/"+ ID + ". jpg "; string savethumbnailpath = system. web. httpcontext. current. server. mappath ("~ /"+ Path); thumbnail = thumbrix. getthumbnail (original_image, target_width, target_height, true); thumbnail. save (savethumbnailpath, system. drawing. imaging. imageformat. JPEG); context. response. write (PATH);} catch (exception e) {// if any kind of error occurs return a 500 internal server error context. response. status Code = 500; context. response. write ("an error occurred during the upload process! ");} Finally {If (thumbnail! = NULL) {thumbnail. Dispose () ;}} public bool isreusable {get {return false ;}}}}
3. Mood. aspx
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "mood. aspx. cs" inherits = "mood. Mood" %> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
Developed with vs2010, the following is the project Source Code address: http://download.csdn.net/detail/wuwo333/5944249
In the source code, when bitmap is saved, the SAVE parameter (system. Drawing. imaging. imageformat. JPEG) is not set, causing the thumbnail file to be too large! This error occurs in the source code. Please note that!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
