diymall-water/WebRoot/admin/material/add.htm

<link rel="stylesheet" href="/admin/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/admin/assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="/admin/assets/css/ace.min.css" />
<link rel="stylesheet" href="/admin/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="/admin/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="/admin/css/style.css" />

<script src="/admin/script/jquery.min.js"></script>
<script src="/admin/script/jquery.form.js"></script>

<!-- 文件上传所需要css和js -->
<link rel="stylesheet" href="/admin/script/FileUpload/css/jquery.fileupload.css">
<script type="text/javascript" src="/admin/script/FileUpload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/admin/script/FileUpload/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/admin/script/FileUpload/jquery.fileupload.js"></script>

<div class="page-content" style="height:450px;overflow:scroll;">
	<div class="page-header">
		<h1>添加模板素材</h1>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<form class="form-horizontal" action="/admin/material/save" method="post" id="submit_form">
				<div class="form-group">
					<label class="col-sm-3 control-label"><span style="color: #f00">*</span>标题</label>
					<div class="col-sm-9">
						<input type="text" name="title" class="col-xs-10 col-sm-5" style="border: 1px solid #ccc" />
					</div>
				</div>
				<div class="space-4"></div>
				<div class="form-group">
					<label class="col-sm-3 control-label"><span style="color: #f00">*</span>素材分类</label>
					<div class="col-sm-9" id="area_list">
						<select name="type_id" class="col-xs-10 col-sm-5">
							##for(_type in type_list!){
								<option value="${_type.id!}">${_type.title!}</option>
							##}
						</select>
					</div>
				</div>
				<div class="space-4"></div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><span style="color: #f00">*</span>图片</label>
					<div class="col-sm-10">
						<a href="javascript:void(0);" class="file">选择图片
							<input type="file" class="autosize-transition form-control" name="image" id="uploadImg" style="overflow: hidden; word-wrap: break-word; resize: horizontal;border: 1px #ccc solid;" />
						</a>
						<div style="margin-top:10px;">
							<img style="height:100px;display: none;" id="img_url" />
						</div>
					</div>
				</div>
				<input type="hidden" name="img_url" />
			</form>
		</div>
	</div>
</div>
<div style="width:100%;text-align: center;">
	<button type="button" class="btn btn-info" onclick="return submitForm()" style="padding:0px 5px;margin-top:5px;">
		<i class="icon-ok bigger-110"></i>确定
	</button>
	&nbsp;&nbsp;
	<button type="reset" class="btn" onclick="parent.hideAlert()" style="padding:0px 5px;margin-top:5px;">
		<i class="icon-undo bigger-110"></i>取消
	</button>
</div>
<script>
$('#uploadImg').fileupload({
    url: '/admin/uploadImg',
    dataType: 'json',
    done: function (e,data) { 
    	var json = $.parseJSON(data.jqXHR.responseText); 
    	if(json.success){
    		$("#img_url").attr("src", json.img_url);
    		$("#img_url").show();
    		$("input[name='img_url']").val(json.img_url);
        }else{
        	alert(json.msg);
        }
    }
});
function submitForm(){
	
	$('#submit_form').ajaxSubmit({
	    success: function(data){
	    	alert(data.msg);
	    	if(data.success){
	    		parent.location.reload();
	    	}
	    }
	});
}
</script>