动态表格上传图片及预览

一、效果

二、html代码

<h3>3. 动态表格上传图片及预览</h3><br />
    <button type="button" id="insert">增加</button>
    <table class="table">
        <thead></thead>
        <tbody></tbody>
    </table>

三、css

<style>
        .table tr {
            border-style: solid;
        }

        .table td {
            width: 300px;
            height: 300px;
            border-style: solid;
        }
        .table img{
            width: 300px;
            height: 300px;
        }
    </style>

四、js

 $("#insert").click(function () {
            //$(".table tbody").empty();
            //存放input标签和p标签
            var p = $("<p></p>").append("上传图片：");
            var fileinput = $("<input/>").attr("type", "file").attr("id", "importimg");
            var hang1 = $("<td></td>").append(p).append(fileinput);
            //存放img标签
            var img = $("<img/>").attr("src", "").attr("id", "sctp");
            var hang2 = $("<td></td>").append(img);
            //组装    
            $("<tr></tr>").append(hang1).append(hang2).appendTo(".table tbody");
        });
        $(document).on("change", "#importimg", function () {
            var file = getObjectURL(this.files[0]);
            $(this).parents("tr").find("#sctp").attr("src",file);
        });
        //建立一個可存取到该file的url
　　　　　　function getObjectURL(file) {
　　　　　　　　var url = null ;
　　　　　　　　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 ;
　　　　　　}