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"  /></div>

<div >
    </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"  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 ;
}