CoolUpload

Multiple File Upload jQuery Plugin for ASP.Net

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

Examples

Click on + sign to upload file.

+

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="~/js-tools/CoolUpload/sampleupload/"
        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="/drive/uploadtest/ffe23e3546034c3cb2ddbd9822a7483f.JPG" />
    </div>
    <div class="file" id="e42608e9-3ee6-a1a2-3deb-d01cafdfb685">
        <input type="hidden" name="file" value="/drive/uploadtest/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

Option Default Description
data-multiple true true | false Mandatory
data-uploadpath ""

Same value - ~/js-tools/CoolUpload/sampleupload/

data-uploadhandler coolupload.ashx

absolute path to file coolupload.ashx

data-generatename true true | false

Auto generate a new filename.

data-previewid

ID of container tag that will display uploaded files.

data-filesizelimit 2

File size in MB

data-validtype image/png,image/jpeg,image/gif

Comma seperated list of allowed content type

data-onfileuploadsuccess

fileUploadSuccess

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

"item" is hidden field object. This hidden field contain the path of file generated after upload.

"d" is id of file

in file preview container

data-onfileuploadremove

Function Name

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

"d" is id of file div in file preview container

data-fileremoveallowed true true | false

Whether to allowed removing file from queue or after upload.

Support

For any kind of support for this script please write an email to me rajk...@rudrasofttech.com .

Please be elaborate in explaining your question.

Chat With Us Close
Leave Message