jQuery FileUpload 文件上传

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

在线实例

实例预览 jQuery FileUpload简单实例DEMO

实例中用到的PHP上传类UploaderDemo.php点击下载

引入文件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>

使用方法

<input type="file" value="" name="simplefile" id="simplefile" />

<script>
	$('#simplefile').fileupload({
		url: "/static/php/UploaderDemo.php",
		dataType: 'json',
		done: function(e, JsonData) {
			var json = JsonData.result;
			if (json.state == 'success') {
				$imgHtml = '<span>';
				$imgHtml += '<a href="' + json.file + '" target="_blank">';
				$imgHtml += '<img src="' + json.file + '" width="100" height="100"  align="absmiddle"/>';
				$imgHtml += '</a>';
				$imgHtml += '<a href="javascript:uploadifyRemove(&quot;' + json.file + '&quot;)">删除</a>';
				$imgHtml += '</span>';
				$('#slide_preview').html($imgHtml)
			} else {
				alert(json.message)
			}
			return false
		}
	});
	function uploadifyRemove(filePath) {
		if (confirm('确定要删除吗？')) {
			$.post("/static/php/UploaderDemo.php?action=del", {
				filePath: filePath
			},
			function(res) {
				$('a[href="' + res + '"]').parent().remove()
			})
		}
	}
</script>