這次帶給大家簡易的圖片點擊上傳功能, 做出簡易的圖片點擊上傳功能注意事項有哪些,以下就是實戰案例,一起來看一下。
簡易圖片點選上傳預覽範例。 chrome,火狐等瀏覽器 下可支援拖曳預覽
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> //--从 file 域获取 本地图片 url function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } var ss=null var ImgType=["gif", "jpeg", "jpg", "bmp", "png","ico"]; //--将本地图片 显示到浏览器上 function preImg(obj, targetId) { ss=obj; if (!RegExp("\.(" + ImgType.join("|") + ")$", "i").test(obj.value.toLowerCase())) { alert("选择文件错误,图片类型必须是" + ImgType.join(",")); this.value = ""; return false } var sourceId=obj.id var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; } </script> </head> <body> <form action=""> <label style="position: relative;width:100px;height:100px;display: block;line-height:100px; " align="center"> <input type="file" accept="image/*" name="imgOne" id="imgOne" onchange="if(this.value){preImg(this, 'imgPre');}" style="height: 100%;width: 100%;position: absolute;z-index: 9;left: 0;right: 0;opacity: 0;"/> <img id="imgPre" src="" style="display: block;position: absolute;width:100%;height:100%;border: 1px solid #999;"/> 上传图片 </label> </form> </body> </html>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是簡易的圖片點擊上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!