tofacebook.com -专业IT技术社区 jQuery图片灯箱和视频灯箱 Web程序【tofacebook.com】 - tofacebook.com-专业IT技术社区
80°

jQuery图片灯箱和视频灯箱 Web程序【tofacebook.com】

标签:spl   define   注意   image   name   find   controls   简单的   --   

在一些前端页面中经常需要文件上传,为了美观,我们经常做一个灯箱来显示我们选择的文件,

而不是简单的input标签。

html 代码:这个是多图片上传

<div class="layui-form-item">
<div for="0" class="layui-form-label">
<span class="x-red">*</span>添加装修图片
</div>
<input type="file" name="file0" class="file0" id="0" multiple="multiple" /><br><img src="${rc.contextPath}/include/backgroundmanager/images/up.png" id="img_0" style="width: 300px;height: 300px">
</div>
<div id="addDiv"><input type="button" value=" + 点击继续增加" id="addPicture" style="width: 200px;height: 30px;margin: 15px; " /></div>


<div id="addDivNode"> <!--这段代码是点击增加被克隆的div元素-->
<div class="layui-form-item">
<label for="dinfoadd" class="layui-form-label">
<span class="x-red">*</span>装修图片说明
</label>
<div class="layui-input-inline">
<input type="text" id="dinfoadd" name="dinfo" required=""
autocomplete="off" class="layui-input">
<input type="hidden" name="id" class="id" value="0">
<input type="hidden" name="version" class="version" value="0">
<input type="hidden" name="dpath" class="dpath" value="">
</div>
</div>
<div class="layui-form-item">
<div for="file0" class="layui-form-label">
<span class="x-red">*</span>添加装修图片
</div>
<input type="file" name="file0" class="file0" id="0" multiple="multiple" /><br><img src="${rc.contextPath}/include/backgroundmanager/images/up.png" id="img_0" style="width: 300px;height: 300px">
</div>
</div>

js代码:

//追加节点,增加图片信息,
var index=1000;
$(document).on(‘click‘,‘#addPicture‘,function(){
index+=1;
var strVar=$("#addDivNode").clone(true); //克隆元素,注意不是javascript的cloneNode()
strVar.attr("id","addDiv"+index); //改变克隆元素id,注意不是setAttribute()
var lable=strVar.find("#dinfoadd"); //根据id查找子元素
var file=strVar.find("#0");
var img=strVar.find("#img_0");
lable.attr("id","dinfoadd"+index); //改变克隆子元素节点一
file.attr("id",index); //改变克隆元素子节点二
img.attr("id","img_"+index); //改变克隆子元素节点三
$("#addDiv"+index).style="display: block";
$("#addDiv").before(strVar);
});


//######################################图片灯箱###################
$(".file0").change(function(){
var sid=$(this).attr(‘id‘);//获取id
// getObjectURL是自定义的函数,见下面
// this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
// ,但是这里只读取第一个
var objUrl = getObjectURL(this.files[0]) ;
// 这句代码没什么作用,删掉也可以
// console.log("objUrl = "+objUrl) ;
if (objUrl) {
// 在这里修改图片的地址属性
$("#img_"+sid).attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}

同样视频也可以:

html:

<div class="layui-form-item">
<div for="file" class="layui-form-label">
<span class="x-red">*</span>添加客户点评视频
</div>
<div class="aui-form-input">
<input type="file" name="videofile" id="videofile" multiple="multiple" /><br>
<video id="playvideo" width="320" height="240" src="" preload="auto" controls>
</video>
</div>
</div>

js:
$("#videofile").change(function(){
// getObjectURL是自定义的函数,见下面
// this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
// ,但是这里只读取第一个
var objUrl = getObjectURL(this.files[0]) ;
// 这句代码没什么作用,删掉也可以
// console.log("objUrl = "+objUrl) ;
if (objUrl) {
// 在这里修改图片的地址属性
$("#playvideo").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}

 

jQuery图片灯箱和视频灯箱

标签:spl   define   注意   image   name   find   controls   简单的   --   

原文地址:https://www.cnblogs.com/zeussbook/p/9991782.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: