jQuery图片灯箱和视频灯箱

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

而不是简单的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图片灯箱和视频灯箱

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