HTML page upload image preview function, upload multiple pictures at once

Recently encountered a problem in the project, you need to upload images in the local preview, but the traditional ' <input type= ' file > ' does not support. Here you can borrow uploadpreview.js to implement

/* This part of the content is not my original, entirely from the network, thanks to the original author's Sharing */jquery.fn.extend ({    uploadpreview: function  ( OPTs)  {        var _self = this,             _this = $ (This);         opts = jquery.extend ({             Img:  "IMGPR",             width:  100,            Height: 100,             imgtype: ["GIF",  "JPEG",  "jpg ", " BMP ", " PNG "],            callback:  function  ( {}        }, opts |) |  {});         _self.getobjecturl = function  (file)  {             var url = null;             if  (window.createobjecturl != undefined)  {                 url =  Window.createobjecturl (file)             }  else if  (window. url != undefined)  {                 url = window. Url.createobjecturl (file)             } else  if  (window.webkiturl != undefined)  {                 url = wIndow.webkitURL.createObjectURL (file)             }             return url         };        _this.change (function  ()  {            if  (This.value)  {                 if  (! REGEXP ("\. ("  + opts. Imgtype.join ("|")  +  ") $",  "I"). Test (This.value.toLowerCase ()))  {                     alert ("Select File error, picture type must be"  +  opts. Imgtype.join (",")  +  "one of");                     this.value =  "";                     return false                 }                 if  ($.browser.msie)  {                     try {                         $ ("#"  +  OPTs. IMG). attr (' src ',  _self.getobjecturl (this.files[0))                      } catch  (e)  {                          var src =  "";                         var obj = $ ("#"  +  OPTs. IMG);                         var div = obj.parent ("div") [0];                          _self.select ();                         if  (top != self)  {                              window.parent.document.body.focus ()                          }  else {                             _self.blur ()                           }                         src = document.selection.createrange () .text;                          document.selection.empty ();                         obj.hide ();                          obj.parent ("div"). CSS ({                              ' filter ':  ' Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale) ',                               ' width ':  opts. width +  ' px ',                              ' height ':  opts. height +  ' px '                          });                          Div.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader") .src = src                     }                 } else {                      $ ("#"  + opts. IMG). attr (' src ',  _self.getobjecturl (this.files[0))                  }                 opts. Callback ()             }         })     });

You can copy this part of the JS file into your own folder directory, after the jquery file reference. Let's look at a small piece of HTML code

<!--picture Preview window--><div> </div><!--picture upload-->< Input type= "file" id= "Up"/>

Then, only need to in their own JS file to the corresponding file upload form binding Uoload event can be

$ ("#up"). Uploadpreview ({Img: "IMGPR", Width:120, height:120});

Look at the initial page effect:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/88/2F/wKioL1free6BdvYYAACza3B9ySM893.png "title=" Qq20160928160459.png "alt=" Wkiol1free6bdvyyaacza3b9ysm893.png "/>

In my project, want to achieve the effect is, click on a default image can directly replace the original image with the new picture, so need to put the preview image of Src to the original picture, at the same time, I also want to remove the "Select File" and the following file path, these things are not very beautiful, so I took a bit of the method

<! doctype html>

Preliminary results:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/88/30/wKioL1frfyfgRpyFAAVHQxBwd4o130.png "title=" Qq20160928162245.png "alt=" Wkiol1frfyfgrpyfaavhqxbwd4o130.png "/>,

If you want to upload more than one at a time and support the picture preview, we recommend the use of Web Uploader http://fex.baidu.com/webuploader/
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/88/30/wKioL1frfzyg1Ou6AAHHYxeDoS0317.png "title=" Qq20160928162508.png "alt=" Wkiol1frfzyg1ou6aahhyxedos0317.png "/>
if it is a picture, and supports local pre-uploader Buploader
This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1857419
HTML page upload image preview function, upload multiple pictures at once