JS實(shí)現(xiàn)可視化文件上傳
更新時(shí)間:2018年09月08日 14:33:33 作者:damys
這篇文章主要為大家詳細(xì)
介紹了JS實(shí)現(xiàn)可視化文件上傳,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS可視化文件上傳的具體代碼,供大家參考,具體內(nèi)容如下
測試-Style
<style type="text/css"> .imgbox,.imgbox1 { position: relative; width: 200px; height: 180px; border: 1px solid #ddd; overflow: hidden; } .imgnum{ left: 0px; top: 0px; margin: 0px; padding: 0px; } .imgnum input,.imgnum1 input { position: absolute; width: 200px; height: 180px; opacity: 0; } .imgnum img,.imgnum1 img { width: 100%; height: 100%; } .close, .close1 { color: red; position: absolute; right: 10px; top: 0; display: none; } </style>
測試--HTML
<div id="img"> <div class="imgbox"> <div class="imgnum"> <input type="file" class="filepath" /> <span class="close">X</span> <img src="btn.png" class="img1" /> <img src="" class="img2" /> </div> </div> </div>
JS: 需要引入jquery
<script type="text/javascript"> $(function() { $(".filepath").on("change",function() { var srcs = getObjectURL(this.files[0]); //獲取路徑 $(this).nextAll(".img1").hide(); //this指的是input $(this).nextAll(".img2").show(); //fireBUg查看第二次換圖片不起做用 $(this).nextAll('.close').show(); //this指的是input $(this).nextAll(".img2").attr("src",srcs); //this指的是input $(this).val(''); //必須制空 $(".close").on("click",function() { $(this).hide(); //this指的是span $(this).nextAll(".img2").hide(); $(this).nextAll(".img1").show(); }) }) }) //關(guān)鍵代碼:getObjectURL return url function getObjectURL(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 }; //modify img $(function() { $("#img").on("change",".filepath1",function() { //alert($('.imgbox1').length); var srcs = getObjectURL(this.files[0]); //獲取路徑 alert(srcs); //this指的是input /* $(this).nextAll(".img22").attr("src",srcs); //this指的是input $(this).nextAll(".img22").show(); //fireBUg查看第二次換圖片不起做用*/ var htmlImg='<div class="imgbox1">'+ '<div class="imgnum1">'+ '<input type="file" class="filepath1" />'+ '<span class="close1">X</span>'+ '<img src="btn.png" class="img11" />'+ '<img src="'+srcs+'" class="img22" />'+ '</div>'+ '</div>'; $(this).parent().parent().before(htmlImg); $(this).val(''); //必須制空 $(this).parent().parent().prev().find(".img11").hide(); //this指的是input $(this).parent().parent().prev().find('.close1').show(); $(".close1").on("click",function() { $(this).hide(); //this指的是span $(this).nextAll(".img22").hide(); $(this).nextAll(".img11").show(); if($('.imgbox1').length>1){ $(this).parent().parent().remove(); } }) }) }) </script>
注:低版本IE不支持可視化
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 原生JS實(shí)現(xiàn)前端本地文件上傳
- js實(shí)現(xiàn)文件上傳功能 后臺(tái)使用MultipartFile
- JS+Struts2多文件上傳實(shí)例詳解
- vue.js 圖片上傳并預(yù)覽及圖片更換功能的實(shí)現(xiàn)代碼
- php+croppic.js實(shí)現(xiàn)剪切上傳圖片功能
- JavaScript使用享元模式實(shí)現(xiàn)文件上傳優(yōu)化操作示例
- JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- vue.js圖片轉(zhuǎn)Base64上傳圖片并預(yù)覽的實(shí)現(xiàn)方法
- Angularjs實(shí)現(xiàn)多圖片上傳預(yù)覽功能
- JavaScript實(shí)現(xiàn)異步圖像上傳功能
- SpringBoot+Vue.js實(shí)現(xiàn)前后端分離的文件上傳功能
- node.js自動(dòng)上傳ftp的腳本分享
- JS實(shí)現(xiàn)的文件拖拽上傳功能示例
- Vue2.0實(shí)現(xiàn)調(diào)用攝像頭進(jìn)行拍照功能 exif.js實(shí)現(xiàn)圖片上傳功能
- JS和Canvas實(shí)現(xiàn)圖片的預(yù)覽壓縮和上傳功能
- JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能
- js 實(shí)現(xiàn) input type="file" 文件上傳示例代碼
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- Servlet+Jsp實(shí)現(xiàn)圖片或文件的上傳功能具體思路及代碼
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)圖片上傳并正常顯示
- 一個(gè)簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- JS中使用FormData上傳文件、圖片的方法
- 客戶端js判斷文件類型和文件大小即限制上傳大小
- js獲取上傳文件的絕對(duì)路徑實(shí)現(xiàn)方法
- 原生JS和jQuery版實(shí)現(xiàn)文件上傳功能
- 微信JSSDK上傳圖片
- 簡單實(shí)現(xiàn)js上傳文件功能
- JS文件上傳神器bootstrap fileinput詳解
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- 學(xué)習(xí)使用AngularJS文件上傳控件
- JS簡單實(shí)現(xiàn)文件上傳實(shí)例代碼(無需插件)
- 分享5個(gè)好用的javascript文件上傳插件
相關(guān)文章
JS實(shí)現(xiàn)的JSON數(shù)組去重算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的JSON數(shù)組去重算法,結(jié)合實(shí)例形式分析了javascript針對(duì)json數(shù)組的遍歷、判斷實(shí)現(xiàn)去重復(fù)功能相關(guān)操作技巧,需要的朋友可以參考下2018-04-04JS截取字符串 subStr()、substring()、slice() 方法示例詳解
這篇文章主要介紹了JS截取字符串 subStr()、substring()、slice() 方法,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01CSS3 動(dòng)畫卡頓性能優(yōu)化的完美解決方案
今天小編就為大家分享一篇關(guān)于css3 動(dòng)畫卡頓性能優(yōu)化的完美解決方案,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-09-09Javascript如何實(shí)現(xiàn)雙指控制圖片功能
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)雙指控制圖片功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02