jQuery圖片上傳前先在本地預覽
js程式碼:
*名稱:圖片上傳本地預覽外掛 v1.1 *作者:周祥 *時間:2013年11月26日 *介紹:基於JQUERY擴充套件,圖片上傳預覽外掛 目前相容瀏覽器(IE 谷歌 火狐) 不支援safari *外掛網站:http://keleyi.com/keleyi/phtml/image/16.htm *引數說明: Img:圖片ID;Width:預覽寬度;Height:預覽高度;ImgType:支援檔案型別;Callback:選擇檔案顯示圖片後回撥方法; *使用方法: <div> <img id="ImgPr" width="120" height="120" /></div> <input type="file" id="up" /> 把需要進行預覽的IMG標籤外 套一個DIV 然後給上傳控制元件ID給予uploadPreview事件 $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}); */ 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("選擇檔案錯誤,圖片型別必須是" + 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() } }) } });
HTML程式碼:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖片上傳預覽演示-柯樂義</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="16/uploadPreview.js" type="text/javascript"></script>
<script>
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>圖片上傳預覽演示</h2>
<a href="http://keleyi.com/a/bjac/4g8fo9yu.htm" target="_blank">原文</a>
<div><img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
</div>
</body>
</html>
相關文章
- 上傳圖片本地預覽例項程式碼
- 菜鳥學JS(一)——上傳圖片之上傳前預覽圖片JS
- JQuery外掛:圖片上傳本地預覽外掛,改進案例一則。jQuery
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- vue圖片預覽上傳Vue
- js圖片上傳預覽JS
- vue 本地預覽多圖上傳Vue
- input file上傳圖片預覽
- javauploadify上傳圖片並預覽Java
- JS相容各個瀏覽器的本地圖片上傳即時預覽效果JS瀏覽器地圖
- ie8上傳本地圖片檔案轉base64 並預覽地圖
- 圖片上傳預覽效果程式碼例項
- PHP仿微信多圖片預覽上傳功能PHP
- 用createObjectURL實現本地圖片預覽Object地圖
- FileReader()讀取檔案、圖片上傳預覽
- angularjs 實現圖片上傳實時預覽AngularJS
- jsp+springmvc實現檔案上傳、圖片上傳和及時預覽圖片JSSpringMVC
- 基於 vue.js 實現圖片本地預覽 + 裁剪 + 壓縮 + 上傳的功能(二)Vue.js
- FileReader初步使用實現上傳圖片預覽效果
- SpringMVC實現ajax上傳圖片實時預覽SpringMVC
- Android本地圖片上傳(拍照+相簿)Android地圖
- 短視訊平臺搭建,圖片進行預覽上傳、刪除,讀取本地檔案
- chrome瀏覽器不能顯示本地圖片辦法解決(圖片預覽)Chrome瀏覽器地圖
- jQuery HTML5 AJAX 圖片上傳jQueryHTML
- jquery圖片上傳外掛HHuploadifyjQuery
- 短視訊平臺開發,圖片上傳和圖片預覽功能實現
- java,springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地,壓縮圖片上傳(有些圖片會失真),原圖上傳JavaSpring Boot伺服器
- js上傳圖片預覽,相容IE6以上各大主流瀏覽器JS瀏覽器
- 前端實現圖片上傳預覽並轉換base64前端
- Ant-Design-Vue 自定義上傳和圖片預覽功能Vue
- javascript和HTML5上傳圖片之前實現預覽效果JavaScriptHTML
- HTML5可預覽多圖片ajax上傳(使用formData傳遞資料)HTMLORM
- 檔案上傳本地預覽js程式碼例項JS
- FileReader與URL.createObjectURL實現圖片、視訊上傳預覽Object
- 前端圖片預覽前端
- jquery圖片直接貼上上傳的失敗嘗試jQuery
- 圖片預覽元件PhotoView元件View
- 實現圖片預覽