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