在一些前端頁面中經常需要文件上傳，為了美觀，我們經常做一個燈箱來顯示我們選擇的文件，

而不是簡單的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圖片燈箱和視頻燈箱