標籤：onclick png join nsf tls meta exp mit callback
html代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title> <script src="uploadView.js" type="text/javascript"></script> <script> window.onload = function () { new uploadPreview({ UpBtn: "photo", DivShow: "imgdiv", ImgShow: "imgShow" }); } </script></head><body><!-- 上傳的注意事項1,需要將檔案上傳的組件放置在表單裡2,提交方式必須為post3,表單類型必須為複合表單資料(包含了檔案類型,還可以是普通的資料)4,file表單類型的標籤必須包含name屬性 --><div id="imgdiv"><img id="imgShow" width="200" src="404.jpg"/></div><form action="FileUpload" method="post" enctype="multipart/form-data"> 頭像:<input type="file" id="photo" name="photo" value=""/> <br><input type="submit" id="btn" value="上傳"/></form><script type="text/javascript"> document.getElementById("btn").onclick=function(){ alert(document.getElementById("photo").value); }</script></body></html>
外掛程式代碼：
/**發布時間:2014年12月12日*外掛程式介紹:圖片上傳本地預覽外掛程式 相容瀏覽器(IE Google Firefox) 不支援safari 當然如果是使用這些核心的瀏覽器基本都相容*使用方法:*介面構造(IMG標籤外必須擁有DIV 而且必須給予DIV控制項ID)* <div id="imgdiv"><img id="imgShow" width="120" height="120" /></div>* <input type="file" id="up_img" />*調用代碼:* new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });*參數說明:*UpBtn:選擇檔案控制項ID;*DivShow:DIV控制項ID;*ImgShow:圖片控制項ID;*Width:預覽寬度;*Height:預覽高度;*ImgType:支援檔案類型 格式:["jpg","png"];*callback:選擇檔案後回調方法;*版本:v1.4更新內容如下:1.修複回調.*版本:v1.3更新內容如下:1.修複多層級架構擷取路徑BUG.2.去除對jquery外掛程式的依賴.*//**work:圖片預覽外掛程式*/var uploadPreview = function(setting) { /* *work:this(當前對象) */ var _self = this; /* *work:判斷為null或者空值 */ _self.IsNull = function(value) { if (typeof (value) == "function") { return false; } if (value == undefined || value == null || value == "" || value.length == 0) { return true; } return false; } /* *work:預設配置 */ _self.DefautlSetting = { UpBtn: "", DivShow: "", ImgShow: "", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], ErrMsg: "選擇檔案錯誤,圖片類型必須是(gif,jpeg,jpg,bmp,png)中的一種", callback: function() { } }; /* *work:讀取配置 */ _self.Setting = { UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn, DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow, ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow, Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width, Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height, ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType, ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg, callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback }; /* *work:擷取文本控制項URL */ _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; } /* *work:綁定事件 */ _self.Bind = function() { document.getElementById(_self.Setting.UpBtn).onchange = function() { if (this.value) { if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { alert(_self.Setting.ErrMsg); this.value = ""; return false; } if (navigator.userAgent.indexOf("MSIE") > -1) { try { document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]); } catch (e) { var div = document.getElementById(_self.Setting.DivShow); this.select(); top.parent.document.body.focus(); var src = document.selection.createRange().text; document.selection.empty(); document.getElementById(_self.Setting.ImgShow).style.display = "none"; div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; div.style.width = _self.Setting.Width + "px"; div.style.height = _self.Setting.Height + "px"; div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src; } } else { document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]); } _self.Setting.callback(); } } } /* *work:執行綁定事件 */ _self.Bind();}
圖片上傳時預覽外掛程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
