jQuery插件AjaxFileUpload實現ajax文件上傳

jQuery插件AjaxFileUpload用來實現ajax文件上傳，本例是圖片上傳demo

最終頁面效果圖：

1、引入AjaxFileUpload插件相關的js

<!-- fileupload -->
<script src="assets/js/jquery.2.1.1.min.js"></script>
<script src="assets/js/ajaxfileupload.js"></script>

2、實現上傳功能部分代碼

<pre name="code" class="html"><pre name="code" class="html"><form class="widget-box" id="imageForm" name="imageForm"  role="form" method="post" enctype="multipart/form-data">
	<div class="widget-header">
		<h4 class="widget-title">商品圖片</h4>
	</div>


	<div class="row">
		<div class="col-md-12" style="margin: 10px">
			<input type="file" id="file" multiple="" name="img" value="img" accept="image/*" value="上傳圖片"/>
		</div>
	</div>


	<div class="row" name="imageArea" id="imageArea">
		<!--顯示圖片-->
	</div>


	<div style="text-align: center;margin: 20px">
		<button class="btn btn-info btn-sm btn-primary" οnclick="return saveReport1();" id="upload" value="上傳">
			<i class="ace-icon fa fa-check "></i>
			保 存
		</button>
	</div>
</form>

3.實現上傳功能的ajaxFileUpload()腳本

<script type="text/javascript">

	//表單提交成功後刷新頁面
	function saveReport1(){
		var file = $("#file").val();
		if(file == ""){
			alert("請先選擇您要上傳的圖片！");
			return false;
		}else{
			var goodId = $("#goodId").val();

			$.ajaxFileUpload({
				url:"http://43.254.55.113/guide/addImage?goodId="+goodId, //你處理上傳文件的服務端
				secureuri:false,//secureuri是否啓用安全提交,一般設置爲false
				fileElementId:'file',//上傳文件的id、name屬性名
				dataType: 'json', //返回值類型，一般設置爲json、application/json
				contentType : false ,//contentType它的默認值是：application/x-www-form-urlencoded ,上傳的有文件設爲multipart/form-data ，設爲false自動判定
				success: function(data, status){
					if(status == "success"){
						alert("圖片上傳成功！");
						window.location.reload();//提交成功後刷新頁面
					}else{
						alert("圖片上傳失敗！");
						return false;
					}
				},
				error:function(data,status,e){
					alert(e);
				}
			});
			return false;
		}
	}
</script>

參考內容：http://www.cnblogs.com/linjiqin/p/3530848.html