iT邦幫忙

2

Jquery .on('change', selector) 取值問題

  • 分享至 

  • xImage
HTML
<table class='list_table'>
<input type='file' class='form_textbox' name='"LicenseCk1' size='40'>
<input type='file' class='form_textbox' name='"LicenseCk2' size='40'>
<input type='file' class='form_textbox' name='"LicenseCk3' size='40'>
</table>
jquery
$('.list_table').on('change',$("input[name^='LicenseCk']"),function(){
    preview(this,$(this).attr('name'));
});

function preview(input,inputName) {
         if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = '<img class="'+inputName+'" style="max-width: 150px; max-height: 150px;" src="'+e.target.result+'">';
                var div = '<div id="'+inputName+'" style="max-width: 150px; max-height: 150px;"></div>';
                $(input).after('<div style="margin: 0 10px;">'+img+'<img src="remove-icon.png" width="20" alt="刪除" onclick="del_pic(this,\''+inputName+'\')"></div>');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
function del_pic(e,value){
        var newInput = "<input type='file' class='form_textbox' name='"+value+"' size='40'>"; 
        $(e).parent().prev().remove();       
        $(e).parent().remove();
        $('.'+value+'Div').append(newInput);

        var input = $('input[name="removePic"]');

        if(input.val() == '' || input.val() == undefined || input.val() == null) input.val(value);
        else input.val(input.val()+","+value);
}

我現在jquery的 onchange 取$(this)會取table的東西
如果我要取的$("input[name^='LicenseCk']")的值
那我this 要改成甚麼 才能取到

補充
因為我上傳圖片後 會給他預覽圖
然後預覽圖旁邊有小按鈕可以刪除圖檔
我會把inputfile 也一起刪掉(為了把原先上傳的刪除)
然後再把inputfile 重新創建 在抓 新創建的name

dragonH iT邦超人 5 級 ‧ 2019-09-27 14:58:43 檢舉
為什麼是綁 event 在 table 上

你的需求是什麼
柯柯 iT邦新手 3 級 ‧ 2019-09-27 15:15:17 檢舉
因為我 檔案上傳 刪除會吧input重新在創建出來 讓她前一個的檔案能刪掉 所以才綁在表格上
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
dragonH
iT邦超人 5 級 ‧ 2019-09-27 15:26:13
最佳解答

看不懂你的需求

看看這個是不是你要的效果

codepen

看更多先前的回應...收起先前的回應...
柯柯 iT邦新手 3 級 ‧ 2019-09-27 18:22:56 檢舉

我有補充說明了 感謝幫忙

dragonH iT邦超人 5 級 ‧ 2019-09-27 19:06:26 檢舉

柯柯

簡單來說你的需求就是

1 . 上傳圖片然後可以預覽

2 . 刪除預覽圖 同時清空 input

沒錯吧

這樣會不會比較簡潔呢

柯柯 iT邦新手 3 級 ‧ 2019-09-27 20:23:13 檢舉

感謝
應該是因為框架的侷限 所以想法卡住 可以用class跟ID去綁
框架不能增加class 只能自己刻INPUT
/images/emoticon/emoticon32.gif

dragonH iT邦超人 5 級 ‧ 2019-09-27 20:29:06 檢舉

/images/emoticon/emoticon42.gif

0
listennn08
iT邦高手 5 級 ‧ 2019-09-27 15:11:12

.

0
firecold
iT邦新手 1 級 ‧ 2019-09-27 15:30:45

別綁在table 會有問題
event在body 或者div上

https://jsfiddle.net/14br5cud/4/

但你範例size都一樣不知道這樣有什麼意義就是了...
如果你是要抓檔案的size那就又不一樣了

柯柯 iT邦新手 3 級 ‧ 2019-09-27 18:22:51 檢舉

我有補充說明了 感謝幫忙

我要發表回答

立即登入回答