本文实例为大家分享了JS可视化文件上传的具体代码,供大家参考,具体内容如下
测试风格
& lt;风格类型=" text/css "比;
.imgbox, .imgbox1
{
位置:相对;
宽度:200 px;
身高:180 px;
边界:1 px固体# ddd;
溢出:隐藏;
}
.imgnum {
左:0 px;
上图:0 px;
保证金:0 px;
填充:0 px;
}
.imgnum输入。imgnum1输入{
位置:绝对的;
宽度:200 px;
身高:180 px;
透明度:0;
}
.imgnum img。imgnum1 img {
宽度:100%;
高度:100%;
}
.close,
.close1 {
颜色:红色;
位置:绝对的;
右:10 px;
上图:0;
显示:没有;
}
& lt;/style>
测试,HTML
& lt; div id=癷mg”比;
& lt; div类=癷mgbox”比;
& lt; div类=癷mgnum”比;
& lt;输入类型=拔募崩?" filepath "/比;
& lt;跨类=肮乇铡弊４荴
& lt; img src=" https://www.yisu.com/zixun/btn.png " class=" img1 "/比;
& lt; img src=" class=" img2”/比;
& lt;/div>
& lt;/div>
& lt;/div>
JS:需要引入jquery
& lt;脚本type=" text/javascript祝辞
$(函数(){
$ (“.filepath”)。(“改变”,函数(){
var src=getObjectURL (this.files [0]);//获取路径
(美元).nextAll (.img1) hide ();//这指的是输入
(美元).nextAll (“.img2”),告诉();//fireBUg查看第二次换图片不起做用
(美元).nextAll (.close),告诉();//这指的是输入
(美元).nextAll (.img2) .attr (“src”, src);//这指的是输入
(美元).val (”);//必须制空
$ (“.close”)。(“点击”,函数(){
(美元)hide ();//这指的是
(美元).nextAll (.img2) hide ();
(美元).nextAll (“.img1”),告诉();
}）
}）
}）//关键代码:getObjectURL返回的url
函数getObjectURL(文件){
var url=零;
如果窗口。createObjectURL !=未定义){
url=window.createObjectURL(文件)
}如果(窗口。URL !=未定义){
url=window.URL.createObjectURL(文件)
}如果(窗口。webkitURL !=未定义){
url=window.webkitURL.createObjectURL(文件)
}
返回的url
}；//修改img
$(函数(){
$ (" # img ")。(“改变”、“.filepath2”函数(){//警报($ (' .imgbox1 ') . length);
var src=getObjectURL (this.files [0]);//获取路径
警报(src);//这指的是输入/* $ ().nextAll .attr (“.img22”) (“src”, src);//这指的是输入
(美元).nextAll (“.img22”),告诉();//fireBUg查看第二次换图片不起做用*/var htmlImg=' & lt; div类=癷mgbox1”在“+
' & lt; div类=癷mgnum1”在“+
& lt;输入类型=拔募崩?" filepath2 "/祝辞的+
' & lt;跨类=癱lose1祝辞X“+
& lt; img src=" https://www.yisu.com/zixun/btn.png "类=癷mg11”/祝辞的+
& lt; img src=" + src +”class=" img22 "/祝辞的+
+ & lt;/div>
“& lt;/div>”;
(美元).parent () .parent () .before (htmlImg);
(美元).val (”);//必须制空
(美元).parent () .parent () .prev (); (.img11) hide ();//这指的是输入
(美元).parent () .parent () .prev (); (.close1),告诉();
$ (“.close1”)。(“点击”,函数(){
(美元)hide ();//这指的是
(美元).nextAll (.img22) hide ();
(美元).nextAll (“.img11”),告诉();
如果($ (' .imgbox1 ') .length> 1) {
(美元).parent () .parent () .remove ();
}
}）
}）
}）
& lt;/script>
之前
注:低版本IE不支持可视化
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
