Set the property "AllowMultiple = true" This property is available only for 4.5 framework.If you using 4.0.
Simply add js file (http://code.jquery.com/jquery-1.8.2.js) and inline script js( http://code.google.com/p/jquery-multifile-plugin/) file in your control form.And to anything with your .cs file.
the aspx file is, Like below,you can download sample at multifileupload.html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="file-upload.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/****************** Start page styles ********************************************/
body {
background: #DFA01B;
font-family: arial, sans-serif;
font-size: 11px;
}
#wrap {
max-width: 600px;
margin: 30px auto;
background: #fff;
border: 4px solid #FFD16F;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
.field {
padding: 0 0 1em;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
/*
### jQuery Multiple File Upload Plugin v1.48 - 2012-07-19 ###
* Home: http://www.fyneworks.com/jquery/multiple-file-upload/
* Code: http://code.google.com/p/jquery-multifile-plugin/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
###
*/
/*# AVOID COLLISIONS #*/
; if (window.jQuery) (function ($) {
/*# AVOID COLLISIONS #*/
// plugin initialization
$.fn.MultiFile = function (options) {
if (this.length == 0) return this; // quick fail
// Handle API methods
if (typeof arguments[0] == 'string') {
// Perform API methods on individual elements
if (this.length > 1) {
var args = arguments;
return this.each(function () {
$.fn.MultiFile.apply($(this), args);
});
};
// Invoke API method handler
$.fn.MultiFile[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []);
// Quick exit...
return this;
};
// Initialize options for this call
var options = $.extend(
{}/* new object */,
$.fn.MultiFile.options/* default options */,
options || {} /* just-in-time options */
);
// Empty Element Fix!!!
// this code will automatically intercept native form submissions
// and disable empty file elements
$('form')
.not('MultiFile-intercepted')
.addClass('MultiFile-intercepted')
.submit($.fn.MultiFile.disableEmpty);
//### http://plugins.jquery.com/node/1363
// utility method to integrate this plugin with others...
if ($.fn.MultiFile.options.autoIntercept) {
$.fn.MultiFile.intercept($.fn.MultiFile.options.autoIntercept /* array of methods to intercept */);
$.fn.MultiFile.options.autoIntercept = null; /* only run this once */
};
// loop through each matched element
this
.not('.MultiFile-applied')
.addClass('MultiFile-applied')
.each(function () {
//#####################################################################
// MAIN PLUGIN FUNCTIONALITY - START
//#####################################################################
// BUG 1251 FIX: http://plugins.jquery.com/project/comments/add/1251
// variable group_count would repeat itself on multiple calls to the plugin.
// this would cause a conflict with multiple elements
// changes scope of variable to global so id will be unique over n calls
window.MultiFile = (window.MultiFile || 0) + 1;
var group_count = window.MultiFile;
// Copy parent attributes - Thanks to Jonas Wagner
// we will use this one to create new input elements
var MultiFile = { e: this, E: $(this), clone: $(this).clone() };
//===
//# USE CONFIGURATION
if (typeof options == 'number') options = { max: options };
var o = $.extend({},
$.fn.MultiFile.options,
options || {},
($.metadata ? MultiFile.E.metadata() : ($.meta ? MultiFile.E.data() : null)) || {}, /* metadata options */
{} /* internals */
);
// limit number of files that can be selected?
if (!(o.max > 0) /*IsNull(MultiFile.max)*/) {
o.max = MultiFile.E.attr('maxlength');
};
if (!(o.max > 0) /*IsNull(MultiFile.max)*/) {
o.max = (String(MultiFile.e.className.match(/\b(max|limit)\-([0-9]+)\b/gi) || ['']).match(/[0-9]+/gi) || [''])[0];
if (!(o.max > 0)) o.max = -1;
else o.max = String(o.max).match(/[0-9]+/gi)[0];
}
o.max = new Number(o.max);
// limit extensions?
o.accept = o.accept || MultiFile.E.attr('accept') || '';
if (!o.accept) {
o.accept = (MultiFile.e.className.match(/\b(accept\-[\w\|]+)\b/gi)) || '';
o.accept = new String(o.accept).replace(/^(accept|ext)\-/i, '');
};
//===
// APPLY CONFIGURATION
$.extend(MultiFile, o || {});
MultiFile.STRING = $.extend({}, $.fn.MultiFile.options.STRING, MultiFile.STRING);
//===
//#########################################
// PRIVATE PROPERTIES/METHODS
$.extend(MultiFile, {
n: 0, // How many elements are currently selected?
slaves: [], files: [],
instanceKey: MultiFile.e.id || 'MultiFile' + String(group_count), // Instance Key?
generateID: function (z) { return MultiFile.instanceKey + (z > 0 ? '_F' + String(z) : ''); },
trigger: function (event, element) {
var handler = MultiFile[event], value = $(element).attr('value');
if (handler) {
var returnValue = handler(element, value, MultiFile);
if (returnValue != null) return returnValue;
}
return true;
}
});
//===
// Setup dynamic regular expression for extension validation
// - thanks to John-Paul Bader: http://smyck.de/2006/08/11/javascript-dynamic-regular-expresions/
if (String(MultiFile.accept).length > 1) {
MultiFile.accept = MultiFile.accept.replace(/\W+/g, '|').replace(/^\W|\W$/g, '');
MultiFile.rxAccept = new RegExp('\\.(' + (MultiFile.accept ? MultiFile.accept : '') + ')$', 'gi');
};
//===
// Create wrapper to hold our file list
MultiFile.wrapID = MultiFile.instanceKey + '_wrap'; // Wrapper ID?
MultiFile.E.wrap('<div class="MultiFile-wrap" id="' + MultiFile.wrapID + '"></div>');
MultiFile.wrapper = $('#' + MultiFile.wrapID + '');
//===
// MultiFile MUST have a name - default: file1[], file2[], file3[]
MultiFile.e.name = MultiFile.e.name || 'file' + group_count + '[]';
//===
if (!MultiFile.list) {
// Create a wrapper for the list
// * OPERA BUG: NO_MODIFICATION_ALLOWED_ERR ('list' is a read-only property)
// this change allows us to keep the files in the order they were selected
MultiFile.wrapper.append('<div class="MultiFile-list" id="' + MultiFile.wrapID + '_list"></div>');
MultiFile.list = $('#' + MultiFile.wrapID + '_list');
};
MultiFile.list = $(MultiFile.list);
//===
// Bind a new element
MultiFile.addSlave = function (slave, slave_count) {
//if(window.console) console.log('MultiFile.addSlave',slave_count);
// Keep track of how many elements have been displayed
MultiFile.n++;
// Add reference to master element
slave.MultiFile = MultiFile;
// BUG FIX: http://plugins.jquery.com/node/1495
// Clear identifying properties from clones
if (slave_count > 0) slave.id = slave.name = '';
// Define element's ID and name (upload components need this!)
//slave.id = slave.id || MultiFile.generateID(slave_count);
if (slave_count > 0) slave.id = MultiFile.generateID(slave_count);
//FIX for: http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=23
// 2008-Apr-29: New customizable naming convention (see url below)
// http://groups.google.com/group/jquery-dev/browse_frm/thread/765c73e41b34f924#
slave.name = String(MultiFile.namePattern
/*master name*/.replace(/\$name/gi, $(MultiFile.clone).attr('name'))
/*master id */.replace(/\$id/gi, $(MultiFile.clone).attr('id'))
/*group count*/.replace(/\$g/gi, group_count)//(group_count>0?group_count:''))
/*slave count*/.replace(/\$i/gi, slave_count)//(slave_count>0?slave_count:''))
);
// If we've reached maximum number, disable input slave
if ((MultiFile.max > 0) && ((MultiFile.n - 1) > (MultiFile.max)))//{ // MultiFile.n Starts at 1, so subtract 1 to find true count
slave.disabled = true;
//};
// Remember most recent slave
MultiFile.current = MultiFile.slaves[slave_count] = slave;
// We'll use jQuery from now on
slave = $(slave);
// Clear value
slave.val('').attr('value', '')[0].value = '';
// Stop plugin initializing on slaves
slave.addClass('MultiFile-applied');
// Triggered when a file is selected
slave.change(function () {
//if(window.console) console.log('MultiFile.slave.change',slave_count);
// Lose focus to stop IE7 firing onchange again
$(this).blur();
//# Trigger Event! onFileSelect
if (!MultiFile.trigger('onFileSelect', this, MultiFile)) return false;
//# End Event!
//# Retrive value of selected file from element
var ERROR = '', v = String(this.value || ''/*.attr('value)*/);
// check extension
if (MultiFile.accept && v && !v.match(MultiFile.rxAccept))//{
ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi)));
//}
//};
// Disallow duplicates
for (var f in MultiFile.slaves)//{
if (MultiFile.slaves[f] && MultiFile.slaves[f] != this)//{
//console.log(MultiFile.slaves[f],MultiFile.slaves[f].value);
if (MultiFile.slaves[f].value == v)//{
ERROR = MultiFile.STRING.duplicate.replace('$file', v.match(/[^\/\\]+$/gi));
//};
//};
//};
// Create a new file input element
var newEle = $(MultiFile.clone).clone(); // Copy parent attributes - Thanks to Jonas Wagner
//# Let's remember which input we've generated so
// we can disable the empty ones before submission
// See: http://plugins.jquery.com/node/1495
newEle.addClass('MultiFile');
// Handle error
if (ERROR != '') {
// Handle error
MultiFile.error(ERROR);
// 2007-06-24: BUG FIX - Thanks to Adrian Wróbel <adrian [dot] wrobel [at] gmail.com>
// Ditch the trouble maker and add a fresh new element
MultiFile.n--;
MultiFile.addSlave(newEle[0], slave_count);
slave.parent().prepend(newEle);
slave.remove();
return false;
};
// Hide this element (NB: display:none is evil!)
$(this).css({ position: 'absolute', top: '-3000px' });
// Add new element to the form
slave.after(newEle);
// Update list
MultiFile.addToList(this, slave_count);
// Bind functionality
MultiFile.addSlave(newEle[0], slave_count + 1);
//# Trigger Event! afterFileSelect
if (!MultiFile.trigger('afterFileSelect', this, MultiFile)) return false;
//# End Event!
}); // slave.change()
// Save control to element
$(slave).data('MultiFile', MultiFile);
}; // MultiFile.addSlave
// Bind a new element
// Add a new file to the list
MultiFile.addToList = function (slave, slave_count) {
//if(window.console) console.log('MultiFile.addToList',slave_count);
//# Trigger Event! onFileAppend
if (!MultiFile.trigger('onFileAppend', slave, MultiFile)) return false;
//# End Event!
// Create label elements
var
r = $('<div class="MultiFile-label"></div>'),
v = String(slave.value || ''/*.attr('value)*/),
a = $('<span class="MultiFile-title" title="' + MultiFile.STRING.selected.replace('$file', v) + '">' + MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0]) + '</span>'),
b = $('<a class="MultiFile-remove" href="#' + MultiFile.wrapID + '">' + MultiFile.STRING.remove + '</a>');
// Insert label
MultiFile.list.append(
r.append(b, ' ', a)
);
b
.click(function () {
//# Trigger Event! onFileRemove
if (!MultiFile.trigger('onFileRemove', slave, MultiFile)) return false;
//# End Event!
MultiFile.n--;
MultiFile.current.disabled = false;
// Remove element, remove label, point to current
MultiFile.slaves[slave_count] = null;
$(slave).remove();
$(this).parent().remove();
// Show most current element again (move into view) and clear selection
$(MultiFile.current).css({ position: '', top: '' });
$(MultiFile.current).reset().val('').attr('value', '')[0].value = '';
//# Trigger Event! afterFileRemove
if (!MultiFile.trigger('afterFileRemove', slave, MultiFile)) return false;
//# End Event!
return false;
});
//# Trigger Event! afterFileAppend
if (!MultiFile.trigger('afterFileAppend', slave, MultiFile)) return false;
//# End Event!
}; // MultiFile.addToList
// Add element to selected files list
// Bind functionality to the first element
if (!MultiFile.MultiFile) MultiFile.addSlave(MultiFile.e, 0);
// Increment control count
//MultiFile.I++; // using window.MultiFile
MultiFile.n++;
// Save control to element
MultiFile.E.data('MultiFile', MultiFile);
//#####################################################################
// MAIN PLUGIN FUNCTIONALITY - END
//#####################################################################
}); // each element
};
/*--------------------------------------------------------*/
/*
### Core functionality and API ###
*/
$.extend($.fn.MultiFile, {
/**
* This method removes all selected files
*
* Returns a jQuery collection of all affected elements.
*
* @name reset
* @type jQuery
* @cat Plugins/MultiFile
* @author Diego A. (http://www.fyneworks.com/)
*
* @example $.fn.MultiFile.reset();
*/
reset: function () {
var settings = $(this).data('MultiFile');
//if(settings) settings.wrapper.find('a.MultiFile-remove').click();
if (settings) settings.list.find('a.MultiFile-remove').click();
return $(this);
},
/**
* This utility makes it easy to disable all 'empty' file elements in the document before submitting a form.
* It marks the affected elements so they can be easily re-enabled after the form submission or validation.
*
* Returns a jQuery collection of all affected elements.
*
* @name disableEmpty
* @type jQuery
* @cat Plugins/MultiFile
* @author Diego A. (http://www.fyneworks.com/)
*
* @example $.fn.MultiFile.disableEmpty();
* @param String class (optional) A string specifying a class to be applied to all affected elements - Default: 'mfD'.
*/
disableEmpty: function (klass) {
klass = (typeof (klass) == 'string' ? klass : '') || 'mfD';
var o = [];
$('input:file.MultiFile').each(function () { if ($(this).val() == '') o[o.length] = this; });
return $(o).each(function () { this.disabled = true }).addClass(klass);
},
/**
* This method re-enables 'empty' file elements that were disabled (and marked) with the $.fn.MultiFile.disableEmpty method.
*
* Returns a jQuery collection of all affected elements.
*
* @name reEnableEmpty
* @type jQuery
* @cat Plugins/MultiFile
* @author Diego A. (http://www.fyneworks.com/)
*
* @example $.fn.MultiFile.reEnableEmpty();
* @param String klass (optional) A string specifying the class that was used to mark affected elements - Default: 'mfD'.
*/
reEnableEmpty: function (klass) {
klass = (typeof (klass) == 'string' ? klass : '') || 'mfD';
return $('input:file.' + klass).removeClass(klass).each(function () { this.disabled = false });
},
/**
* This method will intercept other jQuery plugins and disable empty file input elements prior to form submission
*
* @name intercept
* @cat Plugins/MultiFile
* @author Diego A. (http://www.fyneworks.com/)
*
* @example $.fn.MultiFile.intercept();
* @param Array methods (optional) Array of method names to be intercepted
*/
intercepted: {},
intercept: function (methods, context, args) {
var method, value; args = args || [];
if (args.constructor.toString().indexOf("Array") < 0) args = [args];
if (typeof (methods) == 'function') {
$.fn.MultiFile.disableEmpty();
value = methods.apply(context || window, args);
//SEE-http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27
setTimeout(function () { $.fn.MultiFile.reEnableEmpty() }, 1000);
return value;
};
if (methods.constructor.toString().indexOf("Array") < 0) methods = [methods];
for (var i = 0; i < methods.length; i++) {
method = methods[i] + ''; // make sure that we have a STRING
if (method) (function (method) { // make sure that method is ISOLATED for the interception
$.fn.MultiFile.intercepted[method] = $.fn[method] || function () { };
$.fn[method] = function () {
$.fn.MultiFile.disableEmpty();
value = $.fn.MultiFile.intercepted[method].apply(this, arguments);
//SEE http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27
setTimeout(function () { $.fn.MultiFile.reEnableEmpty() }, 1000);
return value;
}; // interception
})(method); // MAKE SURE THAT method IS ISOLATED for the interception
}; // for each method
} // $.fn.MultiFile.intercept
});
/*--------------------------------------------------------*/
/*
### Default Settings ###
eg.: You can override default control like this:
$.fn.MultiFile.options.accept = 'gif|jpg';
*/
$.fn.MultiFile.options = { //$.extend($.fn.MultiFile, { options: {
accept: '', // accepted file extensions
max: -1, // maximum number of selectable files
// name to use for newly created elements
namePattern: '$name', // same name by default (which creates an array)
/*master name*/ // use $name
/*master id */ // use $id
/*group count*/ // use $g
/*slave count*/ // use $i
/*other */ // use any combination of he above, eg.: $name_file$i
// STRING: collection lets you show messages in different languages
STRING: {
remove: 'X',
denied: 'You cannot select a $ext file.\nTry again...',
file: '$file',
selected: 'File selected: $file',
duplicate: 'This file has already been selected:\n$file'
},
// name of methods that should be automcatically intercepted so the plugin can disable
// extra file elements that are empty before execution and automatically re-enable them afterwards
autoIntercept: ['submit', 'ajaxSubmit', 'ajaxForm', 'validate', 'valid' /* array of methods to intercept */],
// error handling function
error: function (s) {
/*
ERROR! blockUI is not currently working in IE
if($.blockUI){
$.blockUI({
message: s.replace(/\n/gi,'<br/>'),
css: {
border:'none', padding:'15px', size:'12.0pt',
backgroundColor:'#900', color:'#fff',
opacity:'.8','-webkit-border-radius': '10px','-moz-border-radius': '10px'
}
});
window.setTimeout($.unblockUI, 2000);
}
else//{// save a byte!
*/
alert(s);
//}// save a byte!
}
}; //} });
/*--------------------------------------------------------*/
/*
### Additional Methods ###
Required functionality outside the plugin's scope
*/
// Native input reset method - because this alone doesn't always work: $(element).val('').attr('value', '')[0].value = '';
$.fn.reset = function () { return this.each(function () { try { this.reset(); } catch (e) { } }); };
/*--------------------------------------------------------*/
/*
### Default implementation ###
The plugin will attach itself to file inputs
with the class 'multi' when the page loads
*/
$(function () {
//$("input:file.multi").MultiFile();
$("input[type=file].multi").MultiFile();
});
/*# AVOID COLLISIONS #*/
})(jQuery);
/*# AVOID COLLISIONS #*/
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:FileUpload ID="FileUpload1" class="multi" runat="server" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
<asp:Label ID="lblErrInfo" runat="server"></asp:Label></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Finally execute and enjoy, sample Output:
No comments:
Post a Comment