动态多图上传

Nov 9, 2018 Eric Guo    1970

摘要：可动态加减图片数量，自定义了上传file系统文案（核心是将file隐藏，然后通过button模拟file的操作）

1、注意this和obj的用法

test(this)
function(obj)

2、在动态添加过图片位后，对图片的file的UI进行调整的时候，发现无法通过class在进行操作了，最后采用了onclick直接在代码中使用

代码如下（Bootstrop+JQ）

HTML
    <!--多图上传-->
<div id="img_body">
    <div class="form-group col-md-12">
        <label  class="col-sm-1 control-label" style="width:10%">{:L("_FINANCE_PAYMENT_LIST_FILE")}</label>
        <div class="col-sm-3">
            <!--<input type="file" name="myFile[]">-->
            <input type='button' value='{:L("_FINANCE_PAYMENT_LIST_FILE_BUTTON")}' class='eric_files btn btn-info'/>
            <input id='hiddenFile' name="myFile[]" type='file' style="display:none" onchange="ophiddenFile()" />
            <input id='showFileName' type='text' readonly style="border:0px;"/>
        </div>
        <div class="col-sm-1">
            <button type="button" class="btn btn-info btn-xs" onclick="add_img_file(this)">[+]</button>    <button type="button" class="btn btn-danger btn-xs" onclick="delete_img(this)">[X]</button>
        </div>
    </div>
</div>
    <!--end 多图上传-->
JQ
function add_img_file(){
            var table_html = '<div class="form-group col-md-12">';
                table_html += '<label  class="col-sm-1 control-label" style="width:10%"></label>';
                table_html += '<div class="col-sm-3">';
                table_html += '<input type="button" value="{:L("_FINANCE_PAYMENT_LIST_FILE_BUTTON")}" class="eric_files btn btn-info" onclick="up_files(this)"/>';
                table_html += '<input name="myFile[]" type="file" style="display:none" onchange="ophiddenFile()" />';
                table_html += '<input type="text" readonly style="border:0px;"/>';
                table_html += '</div>';
                table_html += '<div class="col-sm-1">';
                table_html += '<button type="button" class="btn btn-danger btn-xs" onclick="delete_img(this)">[X]</button>';
                table_html += '</div>';
                table_html += '</div>';
            $('#img_body').append(table_html);
        }
        function delete_img(obj){
            $(obj).parent().parent().remove();
        }
        $('.eric_files').on('click',function(){
            console.log('ok');
            $('.only_one').remove();
            var only_html = '<input type="hidden" class="only_one">';
            $(this).parent().prepend(only_html);
            $(this).next().click();
        });
        function ophiddenFile(){
            var dd = $(".only_one").next().next().val().split("\\");
            var file_name = dd[dd.length-1];
            $(".only_one").next().next().next().val(file_name);
        }
        function up_files(obj){
            $('.only_one').remove();
            var only_html = '<input type="hidden" class="only_one">';
            $(obj).parent().prepend(only_html);
            $(obj).next().click();
        }
评论