Javascript allows you to upload and preview local images (compatible with IE, chrome, and ff)

My personal nodejs share Forum: tnodejs.com reference: http://blog.csdn.net/nhconch/article/details/7295456

Problems to be Solved: How to preview and edit local images before uploading;
Recently, we found that many of these functions are implemented based on flash, and many JavaScript implementations have poor code compatibility, especially when IE and Firefox are incompatible with chrome.
Code implementation mainly uses the jquery plug-in imgareaselect, filereader object (chrome and FF interfaces for obtaining local image data), and IE filter effect.

Keywords:Imgareaselect filereaderdocument. selection. createRange () IE filter effect

I. Implement pre-upload Preview
1.1 page display
Code 1-1 displays the web page information to be displayed in HTML.

<! -Preview the image display area --> <Div id = "image_area">  </div> <! -Image Upload region --> <Div id = "upload_area"> <form name = "form1" Action = '/person? C = changeatvatar 'enableype = 'multipart/form-data' method = 'post'> <input type = "file" id = "picpath" name = "atvatar_image"> <a href = "javascript: void (0 ); "Class =" button "> upload a photo </a> <input type = 'text' name =" path "readonly> <Div id =" submit_button "> <a href =" javascript: void (0); "class = 'button '> OK </a> </div>

Code 1-1

To modify the button name of the input file, we have added a piece of code, which will be described in detail in section 2.

<A href = "javascript: void (0);" class = "button"> upload a photo </a> <input type = 'text' name = "path" readonly>

1.2 preview Online Editing
Here we mainly use a plug-in for image editing. If you need to view details, you can view the website
Http://odyniec.net/projects/imgareaselect/, which is easy to use.

$ ('# Biuuu '). imgareaselect ({aspectratio: '1: 1', // show: True, resizable: True, // whether the size can be adjusted autohide: false, // select whether to cancel handles: True, key: True, // whether to enable the keyboard. The default value is false // X1: 75, Y1: 30, X2: 225, y2: 180, // region to be processed, original // X1: Top left X axis Y1: Top left Y axis X2: bottom right X axis Y2: bottom right Y axis keys: {arrows: 1, CTRL: 5, shift: 'resize'}, // adjust the pixel size // oninit: function (IMG, selection) {IAS. setselection (100, 50,250,150, true); IAS. update () ;}, // set the initial function to draw the event triggered when the selection box onselectchange: preview // move the selection box // onselectend: function (IMG, select) {alert (select. width)} // events triggered when the selection box ends });

Code 1-2

Code 1-2 mainly sets some plug-in attributes for editing images. For details, see the plug-in parameter description.
First, we need to create a preview small image after img

$ ('<Div>  </div> '{.css ({float: 'left', position: 'relative ', overflow: 'den den', width: '100px ', height: '100px '}). insertafter ('# biuuu'); // put the new element after # biuuu

Code 1-3

Code 1-3 is to create a small preview image after img

1.3. Online Preview Function

Function previewimage (File) {var porimg = $ ('# biuuu'), // obtain the jquery object viewimg of the large image first =$ ('# view '); // small image jquery object // determines whether the browser is W3C standard, neither IE browser if (file ["Files"] & file ["Files"] [0]) {// use the Javascript filereader object to read local data and assign the data result to the SRC of the image. The specific implementation of this object has not been studied in depth. var reader = newfilereader (); reader. onload = function (EVT) {porimg. ATTR ({SRC: evt.tar get. result}); viewimg. ATTR ({SRC: evt.tar get. result});} reader. readasdataurl (file. files [0]);} // in IE browser, the filter effect is used for display. Note that the object used for the filter effect is a div object rather than an IMG object, therefore, we need to remove the original IMG object to generate a new Div object, and assign the corresponding class and idelse {// create the DOM object var ieimagedom = Document of the DIV to be filtered. createelement ("Div"); var proieimagedom = document. createelement ("Div"); // trim ({float: 'left', position: 'relative ', overflow: 'hidd', width: '100px', height: '100px '}). ATTR ({"ID": "View"}); $ (proieimagedom ). ATTR ({"ID": "biuuu"}); // Delete the original IMG object, append creates the div dom object porimg. parent (). prepend (proieimagedom); porimg. remove (); viewimg. parent (). append (ieimagedom); viewimg. remove (); // use the filter effect to generate an image preview file. select (); path into document.selection.createrange().text=((ieimagedom=.css ({"filter": "progid: DXImageTransform. microsoft. alphaimageloader (Enabled = 'true', sizingmethod = 'Scale', src = \ "" + path + "\") "too many variables (proieimagedom=.css ({" filter ":" progid: DXImageTransform. microsoft. alphaimageloader (Enabled = 'true', sizingmethod = 'Scale', src = \ "" + path + "\")"});//. style. filter = "progid: DXImageTransform. microsoft. alphaimageloader (Enabled = 'true', sizingmethod = 'Scale', src = \ "" + path + "\") "; // use the filter effect}

In this way, you can edit an image online and upload it to preview it.

Note that the Code must be accessed by a client, for example, http: // loacalhost/imgpreview/index.html. You do not need to directly click index.html for access.

Code download