jeudi 5 novembre 2015

Show/delete individual file in dialog box from multiple input file jquery

DEMO

I want to show/delete individual files in a dialog box.

In my demo user can add multiple files in the input type file then after clicking upload the information of the files are appended in the table. I want to show the file in a dialog box, or delete/remove it from the input file. In the table user can see view/delete when the user click on view the that file should show in the dialog box when user click delete that file should be removed from the input file.

any idea is appreciated.

P.S.

I didn't use the snippet here in SO because I don't know how to add external file

JS

var div = $("<div id='showfile'>");
$("body").prepend(div);
$("#showfile").dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    //title: "Modal",
    height: 800,
    width: 800,
    buttons: {
        "Close": function () {
            $(this).dialog('close');
        }
        //    "No": function () {
        //    $(this).dialog('close');
        //}
    }
});
$('#add').click(function (e) {
    e.preventDefault();
    var file = $('#file')[0].files;

    $("#table").find("tr:gt(0)").remove();
    for (var i = 0; i < file.length; i++) {
        var id = Math.random();
        var newRow = "<tr>" +
            "<td id='' name='nameoffile'>" + file[i].name + "</td>" +
            "<td id='' name='size'>" + file[i].size + "</td>" +
            "<td id='' name='type'>" + file[i].type + "</td>" +
            "<td>" + "<a href='#' id='" + id + "' class='view'>View</a>" + "/" + "<a href='#' id='" + id + "' class='delete'>Delete</a>" + "</td>" +
            "</tr>";
        $("#table > tbody > tr:last").after(newRow);
    }
});
$('#file').change(function () {
    console.log($('#showfile').files);
})
$(document).on('click', '.view', function (e) {
    e.preventDefault();
    e.stopPropagation();
    readURL($('#file').files);
    console.log($('#file'))
});


function readURL(input) {
    console.log(input);
    $("#showfile").dialog({
        title: "Show File"
    });


    for (var i = 0; i < input.files.length; i++) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                //$('#blah').attr('src', e.target.result);
                $('#showfile').append('<img src=' + e.target.result + ' />')

            };


            reader.readAsDataURL(input.files[i]);
        }

    }
    $("#showfile").dialog("open");
}

html

<input type="file" id="file" name="" multiple/>
<input type="button" value="Upload " id="add" id="" />
<table id="table" class="">
    <tr id="">
        <th>Name of File</th>
        <th>Size</th>
        <th>Type</th>
        <th>Action</th>
    </tr>
</table>

Aucun commentaire:

Enregistrer un commentaire