Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to upload picture preview function on HTML page. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Recently encountered a problem in the project, the need to upload pictures can be previewed locally, but the traditional''does not support it. Here you can borrow the uploadPreview.js implementation

/ * this part of the content is not my original, completely from the network, thank the original author for 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 ("error selecting file, picture type must be one of" + opts.ImgType.join (",") + ") 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 to your own folder directory and reference it after the jQuery file. Let's take a look at a short piece of html code.

Then, you only need to bind the uoload event to the corresponding file upload form in your own js file

("# up") .uploadPreview ({Img: "ImgPr", Width: 120, Height: 120})

Take a look at the preliminary page effect:

In my project, the effect I want to achieve is that by clicking on a default picture, I can directly replace the original picture with a new one, so I need to assign the src of the preview picture to the original picture. At the same time, I also want to remove the "select file" and the back file path, which are not very beautiful, so I took a method.

Document # up {opacity: 0; position:absolute; top:40%; left:1%;} / * set the file upload form completely transparent, hide it under the picture, and do not show it to the user * /

$(".up") .uploadPreview ({Img: "ImgPr", Width: 120, Height: 120}); $('.ImgChange') .click (function (e) {e.preventDefault (); / / prevent the a link from jumping to if ($('.up') by default) {/ / add the click event of the picture to $('.up') .click () SetInterval (function () {/ / it takes some time to load the new file path after clicking, so set a delay of 1 second, otherwise it will be undefined $('.ImgChange img'). Attr (' src',$ ('# ImgPr'). Attr ('src')); / / effectively avoid the case of fakepath};})

Screenshot of the preliminary effect:

、

Now I need to add a few words to the picture and prompt the user to click to change the picture. After the picture is changed, these words will be hidden, and the picture preview window above will be removed.

HTML code

Click to change the picture

CSS code

.up {opacity: 0; position:absolute; top:40%; left:20%;} .ImgChange {display: inline-block; position:relative;} .changeImg {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:150px; height:30px; line-height:30px; text-align:center; color:#fff Background:#00B7EE; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;}

JS code

$('.ImgChange') .click (function (e) {e.preventDefault (); if ($('up')) {$('.up'). Click (). UploadPreview ({Img: "ImgPr", Callback: remove ()}); / * look at the original JS file, there is also a drop function available * /}) Function remove () {$('.changeImg') .hide ();}

If you want to upload more than one image at a time and support image preview, it is recommended to use Web Uploader http://fex.baidu.com/webuploader/.

If it is a picture, and local pre-UploaderbUploader is supported

This is the end of this article on "how to upload picture preview function on HTML page". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.