danci/www.hanlinyuanonline.com/Application/Admin/View/Slider/edit.html

<!-- 头部 -->
<include file="Public/top" />
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side sidebar-offcanvas">
        <!-- 左边 -->
        <include file="Public/left" />
    </aside>

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">
        <!-- Content Header (Page header) -->
        <!-- bar -->
        <include file="Public/bar" />
            <!-- 右侧 -->
	        <div class="col-md-12">
                <form method="post">
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">编辑Banner</h3>
                        </div><!-- /.box-header -->
                        <!-- form start -->
                        <div class="box-body">
                        
                            <div class="form-group">
                                <div class="input-group margin col-xs-6">
                                    <div class="input-group-btn">
                                        <button class="btn btn-primary" type="button">链接：</button>
                                    </div>
                                    <input type="text" name="link_url" value="<{$info['link_url']}>" class="form-control"/>
                                </div>
                            </div>
                            
                        	<div class="form-group">
                                <div class="input-group margin col-xs-6">
                                    <div class="input-group-btn">
                                        <button class="btn btn-primary" type="button">显示顺序：</button>
                                    </div><!-- /btn-group -->
                                    <input type="text" name="slider_sort" value="<{$info['slider_sort']}>" class="form-control"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group margin col-xs-6">
                                    <div class="input-group-btn">
                                    	<button class="btn btn-primary" type="button">Banner图片：</button>
                                    </div><!-- /btn-group -->
                                    <div class="col-xs-10">
                                    	<input name="slider_pic" type="hidden" id="slider_pic" value="<{$info['slider_pic']}>">
                                    	<input id="upload" name="image" accept="image/*" type="file" style="display: none"/>
                                    	<img id="headPic" src="<empty name="info['slider_pic']">__PUBLIC__/img/banner.jpg<else /><{$info['slider_pic']}></empty>" height="150px" style="padding: 5px">
                                    	<button id="submit_btn" type="button" class="btn btn-primary" style="display: none;">确定修改</button>
                                    	<label >点击图片即可修改<br/>建议上传尺寸：1920x960 px</label><br>
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <input type="hidden" name="step" id="step" value="2" />
                            <input type="hidden" name="slider_id" id="slider_id" value="<{$info['slider_id']}>" />
                            <button class="btn btn-primary" name="submit1" type="submit">提交</button>
                            <button class="btn btn-primary" name="submit2" type="reset">重置</button>
                            <a href="javascript:history.go(-1)" class="btn btn-primary">返回</a>
                        </div>
                    </div>
                </form>
                <!-- /.box -->
            </div>
	        <!-- 右侧 -->
        </aside>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- Main Footer -->
    <!-- 底部 -->
    <script src="__PUBLIC__/js/ajaxfileupload.js" type="text/javascript"></script>
	<script type="text/javascript">
	<!--
	$(function() {
	    //头像预览
	    $("#headPic").click(function () {
	        $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
	        $("#upload").on("change",function(){
	            var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
	            if (objUrl) {
	                $("#headPic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
	            }
	            // 如果确认已经选择了一张图片, 则进行上传操作
	            if ($.trim($(this).val())) {
	                $("#submit_btn").trigger('click');
	            }
	        });
	    });
	
	     //图片上传
	    $("#submit_btn").click(function () {
	        var imgurl = document.getElementById("upload").value;
	        $.ajaxFileUpload({
	            url:"/admin/slider/upload?dir=ad",
	            fileElementId: "upload", //文件上传域的ID，这里是input的ID，而不是img的
	            dataType: 'json', //返回值类型 一般设置为json
	            contentType: "application/x-www-form-urlencoded; charset=utf-8",
	            success: function (data) {
	                if (data.code==0){
	                    $("#imag").attr("src","/images/loading.gif");
	                    //将图片换成默认的+图片
	                    $("#imag").attr('src',data.path);
	                    $('#slider_pic').val(data.path);
	                }else{
	                	alert(data.info);
	                }
	            }
	        });
	    });
	});
	
	//建立一個可存取到該file的url
	function getObjectURL(file) {
	    var url = null ;
	    if (window.createObjectURL!=undefined) { // basic
	        url = window.createObjectURL(file) ;
	    } else if (window.URL!=undefined) { // mozilla(firefox)
	        url = window.URL.createObjectURL(file) ;
	    } else if (window.webkitURL!=undefined) { // webkit or chrome
	        url = window.webkitURL.createObjectURL(file) ;
	    }
	    return url ;
	}
	//-->
	</script>
   <!-- 底部 -->
   </body>
</html>