js实现多文件上传。

最新推荐文章于 2025-07-18 16:49:06 发布

beimuaihui

最新推荐文章于 2025-07-18 16:49:06 发布

阅读量1.2k

点赞数 1

分类专栏： ajax 文章标签： file input safari list output class

ajax 专栏收录该内容

48 篇文章

订阅专栏

今天看到一个多文件上传的实例，感觉不错，原理就是上传完成后把自身隐藏，然后再生成一个可视的 input type=file 控件，用户感觉就是一个控件可以上传多个文件。

<html>

<head>
<style type="text/css">
.bob-btn-wrap {
	float: left;
	height: 24px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100px;
}

.bob-btn-upload {
	position: relative;
	margin: 0;
	width:100px;
	height:24px;
	margin: 0;
	padding:0;
	background:#0078AE;
}

.bob-btn-file {
	height: 24px;
	left: 0;
	margin: 0px;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100px;
	z-index: 999;
	opacity: 0;
	-ms-filter: \'progid:DXImageTransform.Microsoft.Alpha(Opacity=0 ) \';
	filter: alpha(opacity = 0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
}
</style>
	<!-- Include the javascript -->
	<script>
	/**
	 * Convert a single file-input element into a 'multiple' input list
	 *
	 * Usage:
	 *
	 *   1. Create a file input element (no name)
	 *      eg. <input type="file" id="first_file_element">
	 *
	 *   2. Create a DIV for the output to be written to
	 *      eg. <div id="files_list"></div>
	 *
	 *   3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
	 *      eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
	 *
	 *   4. Add the first element
	 *      eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) );
	 *
	 *   5. That's it.
	 *
	 *   You might (will) want to play around with the addListRow() method to make the output prettier.
	 *
	 *   You might also want to change the line 
	 *       element.name = 'file_' + this.count;
	 *   ...to a naming convention that makes more sense to you.
	 * 
	 * Licence:
	 *   Use this however/wherever you like, just don't blame me if it breaks anything.
	 *
	 * Credit:
	 *   If you're nice, you'll leave this bit:
	 *  
	 *   Class by Stickman -- http://www.the-stickman.com
	 *      with thanks to:
	 *      [for Safari fixes]
	 *         Luis Torrefranca -- http://www.law.pitt.edu
	 *         and
	 *         Shawn Parker & John Pennypacker -- http://www.fuzzycoconut.com
	 *      [for duplicate name bug]
	 *         'neal'
	 */
	function MultiSelector(el, list_target, max ){

		// Where to write the list
		this.list_target = list_target;
		// How many elements?
		this.count = 0;
		// How many elements?
		this.id = 0;

		//default file name
		this.file_name='file_' + this.id++;
		this.class_name='';
		// Is there a maximum?
		if( max ){
			this.max = max;
		} else {
			this.max = -1;
		};
		
		/**
		 * Add a new file input element
		 */
		this.addElement = function( element ){

			// Make sure it's a file input element
			if( element.tagName == 'INPUT' && element.type == 'file' ){

				// Element name -- what number am I?

				//element.name = 'file_' + this.id++; copy file_name			
				if( element.getAttribute('name')){
					this.file_name=element.getAttribute('name');
				}
				if(element.className){
					this.class_name=element.className;
				}
				element.name = this.file_name;
				//copy class name
				element.className=this.class_name;
				// Add reference to this object
				element.multi_selector = this;

				// What to do when a file is selected
				element.onchange = function(){

					// New file input
					var new_element = document.createElement( 'input' );
					new_element.type = 'file';

					// Add new element
					this.parentNode.insertBefore( new_element, this );

					// Apply 'update' to element
					this.multi_selector.addElement( new_element );

					// Update list
					this.multi_selector.addListRow( this );

					// Hide this: we can't use display:none because Safari doesn't like it
					this.style.position = 'absolute';
					this.style.left = '-1000px';

				};
				// If we've reached maximum number, disable input element
				if( this.max != -1 && this.count >= this.max ){
					element.disabled = true;
				};

				// File element counter
				this.count++;
				// Most recent element
				this.current_element = element;
				
			} else {
				// This can only be applied to file input elements!
				alert( 'Error: not a file input element' );
			};

		};

		/**
		 * Add a new row to the list of files
		 */
		this.addListRow = function( element ){

			// Row div
			var new_row = document.createElement( 'div' );

			// Delete button
			var new_row_button = document.createElement( 'input' );
			new_row_button.type = 'button';
			new_row_button.value = 'X';
			new_row_button.className = 'buttons';

			// References
			new_row.element = element;

			// Delete function
			new_row_button.onclick= function(){

				// Remove element from form
				this.parentNode.element.parentNode.removeChild( this.parentNode.element );

				// Remove this row from the list
				this.parentNode.parentNode.removeChild( this.parentNode );

				// Decrement counter
				this.parentNode.element.multi_selector.count--;

				// Re-enable input element (if it's disabled)
				this.parentNode.element.multi_selector.current_element.disabled = false;

				// Appease Safari
				//    without it Safari wants to reload the browser window
				//    which nixes your already queued uploads
				return false;
			};

			// Set row value
			new_row.innerHTML = element.value;

			// Add button
			new_row.appendChild( new_row_button );

			// Add it to the list
			this.list_target.appendChild( new_row );
			
		};
		
		this.addElement(el);
	};
	</script>
</head>

<body>

<!-- This is the form -->
<form enctype="multipart/form-data" action="file.php" method = "post">
	<!-- The file element -- NOTE: it has an ID -->
	<div class="bob-btn-wrap" style="">
					<input type="buton" class="buttons bob-btn-upload" value="Upload" style="" />
					<input type="file"  id="my_file_element" name="document[]"  class="bob-btn-file" style="" />				
				</div>
				<div id="files_list" style='clear:both;'> </div>
	<input type="submit">
</form>
Files:
<!-- This is where the output will appear -->

<script>
	<!-- Create an instance of the multiSelector class, pass it the output target and the max number of files -->
	var multi_selector = new MultiSelector( document.getElementById( 'my_file_element' ), document.getElementById( 'files_list' ), 3 );
	<!-- Pass in the file element -->
	//multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
</body>
</html>

参考：

1.http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/