ajax 多文件上傳

<!--全局公用樣式-->
  <link rel="stylesheet" type="text/css" href="general/menu/css/globle.css" />
 <script src="general/menu/js/webuploader.min.js"></script>
<script src="general/menu/js/diyUpload.js"></script>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加菜品</h4>
            </div>
            <div class="modal-body" > 
            
            <form id="customerModelForm">
	                  <div class="form-group" >
	                 	<label>菜品名</label>
	                 	 <input id="mName"  name="mName" type="text" value="" class="form-control">
	                </div>
	                 <div class="form-group" >
	                 	<label>菜品圖片</label>
	                    <ul class="upload-ul clearfix">
        			<li class="upload-pick">
            			<div class="webuploader-container clearfix" id="goodsUpload"></div>
        			</li>
    				</ul>
	                </div>
	                <div id="path">
					</div>
	                <div class="form-group" >
	                
	                 	<button id="js-button" type="button" onclick="upload();">上傳</button>
	                </div>
	                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button disabled="disabled" type="button" class="btn btn-primary" id="uporadd" onclick="submit();">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript">
var i=0;
$(function(){
 //上傳圖片
		var $tgaUpload = $('#goodsUpload').diyUpload({
			url:'/admin/Upload',
			success:function( data ) {console.log(data) },
			error:function( err ) { },
			buttonText : '',
			accept: {
				title: "Images",
				extensions: 'gif,jpg,jpeg,bmp,png'
			},
			thumb:{
				width:120,
				height:90,
				quality:100,
				allowMagnify:true,
				crop:true,
				type:"image/jpeg"
			}
		});
})
function upload(){
	$("img[class=img]").each(function() {   
        var src=$(this).attr("src");
        console.log(src)
        $.ajax({	
	        type:"POST",
	        url:"admin/Upload",
	        data:{uploadFile:src},
	        dataType:"json",
			  success: function(data){
				  console.log(data)
				   if(data.status==200){
					   layer.msg("上傳成功");
					   $("#uporadd").attr("disabled",false);
					   console.log(data.data.url);
					  var path=data.data.url;
					   i++;
					$("#path").append('<input type="hidden" name="gj" id="path_'+i+'" value="'+path+'">'); 
				  } 
			  }
	   }); 
	});
}
function submit(){
	var mName=$("#mName").val();
	if(mName == "" || mName == undefined || mName == null){
		return layer.msg('菜品名不能爲空', function(){
			//關閉後的操做
		});
	}
	var paths=",";
	for(var j=1;j<=i;j++){
		 paths=paths+$("#path_"+j).val()+",";
	}
    $.ajax({	
        type:"POST",
        url:"admin/addDishes",
        data:{mName:mName,paths:paths},
        dataType:"json",
		  success: function(data){
			  console.log(data)
			   if(data.status==200){
				   tab.ajax.reload();
			 		tab.draw(false);
			 		$('#myModal').modal('hide');
				   layer.msg("添加成功");
			  }else{
				  layer.msg("菜品名已存在");
			  } 
		  }
   });
}
</script>

複製代碼