CoolUpload

Multiple File Upload jQuery Plugin for ASP.Net

A multiple/single file upload jquery plugin for ASP.Net. The plugin has the ability to upload files asynchronously via AJAX. You can restrict upload by file size and type as well.

• Examples
• Features
• How to Use
• Usage Options
• Download

Examples

Features

1. Multiple or Single File Upload
2. Asynchronous Uploading
3. File Type Restriction
4. File Size Restriction

How To Use

This script goes into head section

<!-- Include jQuery Library -->
                <link href="coolupload.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="coolupload.js"></script>
<script>
    $(document).ready(function () {
        $(".coolupload").coolupload("fullupload", null);
    });
    function deleteUploadFile(d) {
    }
    function fileUploadSuccess(item, d) {
    }
    function getUploadStatus() {
        //alert($(".coolupload").data("uploadstatus"));
    }
</script>

HTML Example

<div id="filecontainer" class="filecontainer">
</div>
<div class="coolupload" data-multiple="true"
        data-uploadpath="~/path/to/destination/folder/"
        data-uploadhandler="coolupload.ashx"
        data-generatename="true"
        data-previewid="filecontainer"
        data-filesizelimit="2"
        data-validtype="image/png,image/jpeg,image/gif"
        data-onfileuploadsuccess="fileUploadSuccess"
        data-onfileuploadremove="deleteUploadFile"
        data-fileremoveallowed="true">
    +<input type="file" />
</div>
<div style="clear:both;"></div>

After upload each file info will be appended to preview container. Same HTML of preview container

<div id="filecontainer" class="filecontainer">
    <div class="file" id="0781b367-8d1e-fc63-3ddb-735abc592ce2">
        <input type="hidden" name="file" value="/destination/folder/ffe23e3546034c3cb2ddbd9822a7483f.JPG" />
    </div>
    <div class="file" id="e42608e9-3ee6-a1a2-3deb-d01cafdfb685">
        <input type="hidden" name="file" value="/destination/folder/c8c657e331344f1cbc12708676d16b7d.pdf">
    </div>
</div>

There will be one div tag corresponding to each uploaded file. Div tags have a hidden variable with name="file" attribute, these hidden variables contain path of uploaded file.

Usage Options

function fileUploadSuccess(item, d) { 
//HOW TO GET UPLOADED FILE PATH
alert("Uploaded File Path -'" $(this).val() + "'");
}

function deleteUploadFile(d) { 
//HOW TO GET FILE PATH
$("#" + d).find("[name=file]").val();
}