//說明：圖片上傳預覽插件 //上傳的時候可以生成固定寬高范圍內的等比例縮放圖//參數設置： //width 存放圖片固定大小容器的寬 //height 存放圖片固定大小容器的高 //imgDiv 頁面DIV的JQuery的id //maxSize 圖片大小最大限制(K) //imgType 數組后綴名 //**********************圖片上傳預覽插件************************* (function ($) {jQuery.fn.extend({uploadPreview: function (opts) {opts = jQuery.extend({width: 0,height: 0,imgDiv: "#imgDiv",maxSize: 300,imgType: ["gif", "jpeg", "jpg", "bmp", "png"],callback: function () { return false; }}, opts || {});//var _self = this;var _this = $(this);var imgDiv = $(opts.imgDiv);imgDiv.width(opts.width);imgDiv.height(opts.height);var version = parseInt($.browser.version, 10);autoScaling = function () {if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";var img_width = imgDiv.width();var img_height = imgDiv.height();if (img_width > 0 && img_height > 0) {var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;if (rate <= 1) {if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";imgDiv.width(img_width * rate);imgDiv.height(img_height * rate);} else {imgDiv.width(img_width);imgDiv.height(img_height);}var left = (opts.width - imgDiv.width()) * 0.5;var top = (opts.height - imgDiv.height()) * 0.5;imgDiv.css({ "margin-left": left, "margin-top": top });imgDiv.show();}},createImg = function () {imgDiv.html('');var img = $("<img />");imgDiv.replaceWith(img);imgDiv = img;},_this.change(function () {if (this.value) {if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {alert("圖片類型必須是" + opts.imgType.join("，") + "中的一種");this.value = "";return false;}imgDiv.hide();if ($.browser.msie && version < 10) {if (version == 6) {var image = new Image();image.onload = function () {if ((image.fileSize / 1024) > opts.maxSize) {alert('圖片大小不能超過' + opts.maxSize + 'K');return false;}}image.src = 'file:///' + this.value;createImg();imgDiv.attr('src', image.src);autoScaling();} else {this.select();var img = document.selection.createRange().text;var image = new Image();image.onload = function () {if ((image.fileSize / 1024) > opts.maxSize) {alert('圖片大小不能超過' + opts.maxSize + 'K');return false;}}image.src = img;imgDiv.html('');imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";try {imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;} catch (e) {alert("無效的圖片文件！");return;}setTimeout("autoScaling()", 100);}}else {try {var file = null;var size = 0;if (this.files && this.files[0]) {file = this.files[0];size = file.size;} else if (this.files && this.files.item(0)) {file = this.files.item(0);size = file.fileSize;}if ((size / 1024) > opts.maxSize) {alert('圖片大小不能超過' + opts.maxSize + 'K');return false;}createImg();//Firefox 因安全性問題已無法直接通過input[file].value 獲取完整的文件路徑try {//Firefox7.0 以下 imgDiv.attr('src', file.getAsDataURL());} catch (e) {//Firefox8.0以上 imgDiv.attr('src', window.URL.createObjectURL(file));}imgDiv.css({ "vertical-align": "middle" });setTimeout("autoScaling()", 100);} catch (e) {//支持html5的瀏覽器,比如高版本的firefox、chrome、ie10if (this.files && this.files[0]) {if ((this.files[0].size / 1024) > opts.maxSize) {alert('圖片大小不能超過' + opts.maxSize + 'K');return false;}var reader = new FileReader();reader.onload = function (e) {imgDiv.attr('src', e.target.result);};reader.readAsDataURL(this.files[0]);setTimeout("autoScaling()", 100);}};}}});}}); })(jQuery);

HTML代碼：

<div style="width: 290px; height: 290px; overflow: hidden; border: 1px solid red;"><div id="imgDiv"></div></div><br><input type="file" value="上傳文件"><script>$(document).ready(function () {$("input").uploadPreview({ width: 290, height: 290, imgDiv: "#imgDiv" });}); </script>

?

轉載于:https://www.cnblogs.com/sumg/p/5140058.html

總結

以上是生活随笔為你收集整理的上传图片预览，支持IE6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。