Javascript for image preview and upload (compatible with IE) code sharing

This article mainly introduces javascript image preview and uploading materials in detail, which has some reference value, interested friends can refer to this article for details about javascript image preview and uploading, which has some reference value. Interested friends can refer

This article provides examples of how to preview and upload js images for your reference. The details are as follows:

Var dailiApply = {change: function (evt) {evt. preventDefault (); var pic = document. getElementById ("preview"), file = document. getElementById ("f"); var ext = file. value. substring (file. value. lastIndexOf (". ") + 1 ). toLowerCase (); // if (ext! = 'Png '& ext! = 'Jpg '& ext! = 'Jpeg ') {alert ("the image format must be png, jpg, or jpeg! "); Return;} var isIE = navigator. userAgent. match (/MSIE /)! = Null, isIE6 = navigator. userAgent. match (/MSIE 6.0 /)! = Null; if (isIE) {file. select (); var reallocalpath = document. selection. createRange (). text; // set the src of img as the local path in IE6 browser to directly display the image if (isIE6) {pic. src = reallocalpath;} else {// for IE of non-IE6 versions, setting img src directly cannot display local images due to security issues. However, you can use a filter to implement pic. style. filter = "progid: DXImageTransform. microsoft. alphaImageLoader (sizingMethod = 'image', src = \ "" + reallocalpath + "\")"; // set the src of img to a base64 encoded transparent image to cancel displaying the default image pic of the browser. src = 'data: image/gif; base64, R0lGODlhAQABAIAAAP // wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw = ';}} else {var file_arr = file. files; var ul = $ (". weui_uploader_files "); if (file_arr.length <7) {for (var key in file_arr) {if (file_arr.hasOwnProperty (key) {var f = file_arr [key]; var url = URL. createObjectURL (f); var reader = new FileReader (); console. log (f); reader. readAsDataURL (f); n + = 1; if (n <7) {reader. _ onload = function (e) {// splice and display the html var list of the preview image =$ ("
"+" "+" X
"); Ul. append (list); // place the converted image address in img var pic = document. getElementById ('preview' + n); // pic. src = this. result; pic. src = url; dailiApply. compress (f ,. 7, undefined); // images. push (f); document. getElementById ('delimiter' + n ). addEventListener ("click", function () {$ (this ). parent (). remove (); -- n ;}) ;}; reader. _ onload ();} else {$. alert ("upload up to 6 images"); n = 6 ;}}} else {$. alert ("uploading up to 6 images");} return False ;},/*** @ param {Object} f input: The image selected is required * @ param {String} quality of the image compression [0, 1] * @ param {String} output_img_type type of the output image */compress: function (f, quality, output_img_type) {var mime_type = "image/jpeg"; if (output_img_type! = Undefined & output_img_type = "image/png") {mime_type = "image/png";} createImageBitmap (f ). then (function (imageBitmap) {var max = 1000; // set the maximum resolution var c_w = ''; var c_h =''; var width = imageBitmap. width; var height = imageBitmap. height; // proportional scaling if (width> max | height> max) {if (width> height) {c_w = max; c_h = max * height/width ;} else {c_h = max; c_w = max * width/height;} else {// do not scale c_w = width; c_h = height;} var canvas = document. createElement ('canvas '); canvas. width = c_w; canvas. height = c_h; var ctx = canvas. getContext ('2d '); ctx. drawImage (imageBitmap, 0, 0, width, height, 0, 0, c_w, c_h); canvas. toBlob (function (blob) {images. push (blob) ;}, mime_type, quality) ;}, submit: function () {var content =$ (". weui_textarea "). val (). trim (); var xhr = new XMLHttpRequest (); var fd = new FormData (document. getElementById ('uploadform'); $. each (images, function (I, e) {fd. append ("images", e) ;}); fd. append ("remark", content); fd. append ("substationproxyId", 8); console. log (images); console. log (fd); if (content) {$. ajax ({url: CONFIG. API. addSubProxyRecruit, type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType beforeSend: function (xhr) {$. showLoading (); $ (this ). prop ("disabled", true)}, success: function (json) {console. log (json); $. hideLoading (); $ (this ). prop ("disabled", false); if (json. errorCode = 0) {$. alert ("saved successfully", function () {location. reload () ;}} else if (json. error code = "-101") {$. alert ('error: '+ json. message, function () {location. href = CONFIG. HTML. login;});} else {$. alert (json. message, function () {}) }});} else {$. alert ('Enter the content ');}}};

Related Articles:

Image preview with HTML5

Html5 image uploads support image preview compression and progress display compatible with IE6 and standard browsers

JavaScript advanced (8) JavaScript to implement image preview and import server functions

The above is the details about how javascript achieves image preview and upload (compatible with IE) code sharing. For more information, see other related articles in the first PHP community!