亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用file標(biāo)簽實現(xiàn)多圖文件上傳預(yù)覽

 更新時間:2017年02月14日 14:34:26   作者:許個愿吧!  
本文介紹了用file標(biāo)簽實現(xiàn)多圖文件上傳預(yù)覽的方法。具有很好的參考價值,下面跟著小編一起來看下吧

js 代碼:

<script> 
 //下面用于多圖片上傳預(yù)覽功能
 function setImagePreviews(avalue) {
 var docObj = document.getElementById("files");
 var dd = document.getElementById("preview");
 dd.innerHTML = "";
 var fileList = docObj.files;
 for (var i = 0; i < fileList.length; i++) {
 dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
 var imgObjPreview = document.getElementById("img"+i);
 if (docObj.files && docObj.files[i]) {
 //火狐下,直接設(shè)img屬性
 imgObjPreview.style.display = 'block';
 //控制縮略圖大小
 imgObjPreview.style.width = '70px';
 imgObjPreview.style.height = '70px';
 //imgObjPreview.src = docObj.files[0].getAsDataURL();
 //火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要一下方式
 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
 }
 else {
 //IE下,使用濾鏡
 docObj.select();
 var imgSrc = document.selection.createRange().text;
 alert(imgSrc)
 var localImagId = document.getElementById("img" + i);
 //必須設(shè)置初始大小
 localImagId.style.width = "70px";
 localImagId.style.height = "70px";
 //圖片異常的捕捉,防止用戶修改后綴來偽造圖片
 try {
  localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
 }
 catch (e) {
  alert("您上傳的圖片格式不正確,請重新選擇!");
  return false;
 }
 imgObjPreview.style.display = 'none';
 document.selection.empty();
 }
 }
 return true;
 }
 </script>

HTML代碼:

<form method="post" enctype="multipart/form-data"> 
 <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="files" name="files" multiple onchange="javascript:setImagePreviews();" />
 <input type="button" id="upload" value="上傳" />
 <div id="preview"> 
 </div> 
</form>

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • 詳解webpack模塊化管理和打包工具

    詳解webpack模塊化管理和打包工具

    這篇文章主要介紹了詳解webpack模塊化管理和打包工具,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • uniapp如何使用 web-view 與網(wǎng)頁互相通信

    uniapp如何使用 web-view 與網(wǎng)頁互相通信

    這篇文章主要介紹了uniapp如何使用 web-view 與網(wǎng)頁互相通信,在APP中使用 this.$scope.$getAppWebview() 獲取webview對象實例,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • javascript基于prototype實現(xiàn)類似OOP繼承的方法

    javascript基于prototype實現(xiàn)類似OOP繼承的方法

    這篇文章主要介紹了javascript基于prototype實現(xiàn)類似OOP繼承的方法,實例分析了JavaScript使用prototype實現(xiàn)面向?qū)ο蟪绦蛟O(shè)計的中類繼承的相關(guān)技巧,需要的朋友可以參考下
    2015-12-12
  • 如何使用JS獲取IE上傳文件路徑(IE7,8)

    如何使用JS獲取IE上傳文件路徑(IE7,8)

    本篇文章是對使用JS獲取IE上傳文件路徑的實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下
    2013-07-07
  • js內(nèi)存泄漏場景、如何監(jiān)控及分析詳解

    js內(nèi)存泄漏場景、如何監(jiān)控及分析詳解

    js內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時這塊內(nèi)存還存在著,垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量,并釋放掉它們所指向的內(nèi)存,這篇文章主要給大家介紹了關(guān)于js內(nèi)存泄漏場景、如何監(jiān)控及分析的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • uni-app的iPhonex底部安全區(qū)域解決方案

    uni-app的iPhonex底部安全區(qū)域解決方案

    這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • JS簡易計算器實例講解

    JS簡易計算器實例講解

    這篇文章主要為大家詳細(xì)介紹了JS簡易計算器實例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • 小程序?qū)崿F(xiàn)計時器功能

    小程序?qū)崿F(xiàn)計時器功能

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)計時器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • js的indexOf方法使用

    js的indexOf方法使用

    indexOf() 方法可返回數(shù)組中某個指定的元素位置,本文就來介紹一下js的indexOf方法使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2023-05-05
  • PHP實現(xiàn)的各種中文編碼轉(zhuǎn)換類分享

    PHP實現(xiàn)的各種中文編碼轉(zhuǎn)換類分享

    這篇文章主要介紹了PHP實現(xiàn)的各種中文編碼轉(zhuǎn)換類分享,本文類庫支持簡體中文、繁體中文、GB2312、BIG5、UTF-8等多種格式之間的轉(zhuǎn)換,需要的朋友可以參考下
    2015-01-01

最新評論