uploadify的使用

html

Upload photos


Uploading…
Empty the list
上传图片

javascript

$(function() {
	var fileRemoved = false;
	function reset() {
		$("#fileInputQueue, #upload-tools").hide();
		$("#status").empty().hide();
		$("#doc-loading").hide();
	}
	$('#fileInput').uploadify({
		uploader: 'static/js/uploadify/uploadify.swf',
		script: 'uploadify.php',
		buttonImg: 'static/image/button.png',
		// rollover: true,
		width: 100,
		height: 30,
		cancelImg: 'static/image/cancel.png',
		// auto: false,
		multi: true,
		// method: 'POST',
		fileDesc: 'Photo(*.jpg; *.jpeg; *.gif; *.png)',
		fileExt: '*.jpg; *.jpeg; *.gif; *.png',
		sizeLimit: 31457280,
		// displayData: 'percentage',
		scriptAccess: 'always',
		scriptData: {
		},
		onSelect: function(event, queueID, fileObj) {
			if (parseInt(fileObj.size) > parseInt(31457280)) {
				size_limit = Math.round(31457280 / 1048576 * 100000) / 100000;
				//上传文件大小超出限制
				fileRemoved = true;
				return false;
			}
			$("#fileInputQueue, #upload-tools").fadeIn();
			if (!fileRemoved) {
				//成功选择文件
			} else {
				//...
			}
		},
		onCancel: function() {
			if ($('.uploadifyQueueItem').size() === 1) {
				reset();
			}
		},
		onClearQueue: function() {
			reset();
		},
		onComplete: function(evt, queueID, fileObj, response, data) {
			//console.log(eval('(' + response + ')').pid);
			//$.parseJSON
			$("#fileInput" + queueID + " .uploadifyProgressBar").css("background", "#6AE16A");
			$("#fileInput" + queueID + " .cancel").hide();
			return false;
		},
		onAllComplete: function(evt, queueID, fileObj, response, data) {
			//全部上传成功
			$("#upload-tools, #doc-loading").hide();
		}
	});
	$('#upload-button').click(function() {
		$('#fileInput').uploadifyUpload();
		$('#upload-tools').hide();
		$("#fileInputQueue").before($("#doc-loading").show());
	});
});

css

.uploadifyQueue{border:1px solid #CCC;display:none;max-height:300px;margin:16px 0 24px 0;overflow:auto;zoom:1;}
.uploadifyQueueItem{border-bottom:1px solid #E2E2E2;font-weight:bold;padding:8px;}.uploadifyQueueItem .cancel{float:right;}
.uploadifyQueueItem:last-child{border-bottom:0;}
.uploadifyError{background-color:#eeacac !important;color:#cc0000 !important;}
.uploadifyProgress{background:#EEE;height:6px;margin-top:8px;overflow:hidden;width:100%;zoom:1;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.05);-webkit-box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.05);}
.uploadifyProgressBar{background:#333;height:6px;margin-left:-1px;width:1px;}
a.delete-item{background:url('static/images/icons/delete.png') center left no-repeat;padding-left:18px;line-height:18px;}