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 ;
}