[JS/JQuery] 多檔上傳 ( drap and drop )

[html]

<div id="('divImg' +did)" title="上傳圖片" class="UploadImg" ondrop="ImgDrop(event,'did">

/*** drap and drop****/
      <input id="('Img' +did)" name="Img" type="file" title="('file' +did)" >

<label for="('Img' +did)">點我上傳<em>或拖拉圖片檔案至此</em></span></label>

<a class="BtnDel" title="刪除" onclick="DelPic('did');"></i>刪除</a>

<img id="('imgPreview' +did)" style="display: none;" src="" alt="@item.Title">
/***end drap and drop****/

</div>
<div id="('errFile' +did)" class="MsgError" tabindex="0"><span><i class="icon-error"></i></span></div>
               

[js]

var filelist = [];

//點擊上傳
$("input[id^=Img][type='file']").change(function () {
    if (this.files && this.files[0]) {
        FilePrepareUpload(this.files[0], this.files, this.id.replace("Img", ""));
    }
});

//拖拉上傳 drap and drop
function ImgDrop(e, did) {
    if (e.dataTransfer) {
        if (e.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            FilePrepareUpload(e.dataTransfer.files[0], e.dataTransfer.files, did);
        }
    }
}

//刪除檔案
function DelPic(did) {
    $('.PopupDeletePic').addClass("Show");
    $(".PopupDeletePic .BtnDark").attr("onclick", "delImage(" + did + ");");
}

function delImage(did) {

    $('#imgPreview' + did).attr("src", "");

    $('#imgPreview' + did).attr("title", "");

    $("#imgPreview" + did).css("display", "none");

    $("#divImg" + did + " .BtnDel").removeClass("Show");

    $("#divImg" + did + " .ProgressBar").removeClass("Show");

 

    $.each(filelist, function (i, item) {

        if (item.i == did) {          

            filelist.splice(i,1);

            return false;

        }       

    });

    $("#Img" + did).val('');

}

//上傳檔案

function FilePrepareUpload(originalFiles, dataFile, fid) {

    var uploadErrors = [];

    var acceptFileTypes = /(\.|\/)(jpe?g|gif|png)$/i;

    if (originalFiles['type'].length && !acceptFileTypes.test(originalFiles['type'])) {

        uploadErrors.push("檔案格式錯誤，請上傳 .jpg/.jpeg/.gif/.png！");

    }

    if (originalFiles['size'] > 1048576) {

        uploadErrors.push("檔案太大！");

    }

    if (uploadErrors.length > 0) {

        $("#errFile" + fid + " span").addClass("Show");

        $("#errFile" + fid + " span").html("<i class='icon-error'></i>" + uploadErrors.join("\n"));

        $('#imgPreview' + fid ).attr("src", "");

        $("#imgPreview" + fid ).css("display", "none");

        $("#divImg" + fid + " .BtnDel").removeClass("Show");

        $("#divImg" + fid + " .ProgressBar").removeClass("Show");

    } else {

        $("#errFile" + product + " span").removeClass("Show");

        if (dataFile && dataFile[0]) {

            $("#divImg" + fid + " .ProgressBar").addClass("Show");

            $("#divImg" + fid + " .Progress").css("width", '0%');

            var updateProgress = 'updateProgress' + product;

            var reader = new FileReader();

            filelist.push({ i: product, f: dataFile });

           

            reader.onload = function (e) {

                $("#imgPreview" + fid ).attr("src", e.target.result);

                $("#imgPreview" + fid ).css("display", "");

                $("#divImg" + fid  + " .Progress").css("width", '100%');

                $("#imgPreview" + fid ).attr("title", dataFile[0].name);

            }

            reader.readAsDataURL(dataFile[0]);

            $("#divImg" + fid + " .ProgressBar").removeClass("Show");

            $("#divImg" + fid + " .BtnDel").addClass("Show");

        }

    }

}