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

<!-- 头部 -->
<include file="Public/top" />

<script src="__PUBLIC__/js/ajaxfileupload.js" type="text/javascript"></script>
<script language="javascript">
	$(function(){
		var arr =[];
		$('#words_name').on('blur',function(){
			var words = $(this).val();
			if(words.length>0){
				var url = "/admin/words/dict";
				$.post(url,{words_name:words},function(result){
					var words_read = "";
					var words_voice = "";
					var words_audio = "";
					for(var i=0;i<result.data.ps.length;i++){
						words_read += '[' + result.data.ps[i] + '],';
					}
					for(var i=0;i<result.data.pron.length;i++){
						words_audio += '<audio controls="controls"><source src="'+result.data.pron[i]+'" type="audio/mp3" /></audio>';
						words_voice += result.data.pron[i]+',';
					}
					for(var i=0;i<result.data.pos.length;i++){
						$('#'+result.data.pos[i][0]).val(result.data.pos[i][1]);
					}
					for(var i=0;i<result.data.sent.length;i++){
						var j = i+1;
						jz_en = 'jz_en'+j;
						jz_cn = 'jz_cn'+j;
						console.log(jz_en);
						console.log(jz_cn);
						$('#'+jz_en).val(result.data.sent[i][0]);
						$('#'+jz_cn).val(result.data.sent[i][1]);
					}
					$('#words_read').val(words_read);
					$('#words_voice').val(words_voice);
					$('#words_audio').html(words_audio);
				},'json');
			}
		});
		//建立一個可存取到該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 ;
	}
		
		document.getElementById("upload1").value='';
		
	    $("#headPic1").click(function () {
	        $("#upload1").click(); //隐藏了input:file样式后，点击头像就可以本地上传
	        $("#upload1").on("change",function(){
			
				var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
				if (objUrl) {
					$("#headPic1").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
				}
	
				// 如果确认已经选择了一张图片, 则进行上传操作
				if ($.trim($(this).val())) {
					$("#submit_btn1").trigger('click');
				}
			});
	    });
	
	     //图片上传
	    $("#submit_btn1").click(function () {
	        var imgurl = document.getElementById("upload1").value;
	        $.ajaxFileUpload({
	            url:"/admin/slider/upload?dir=words",
				secureuri:false,
	            fileElementId: "upload1", //文件上传域的ID，这里是input的ID，而不是img的
	            dataType: 'json', //返回值类型 一般设置为json
	            contentType: "application/x-www-form-urlencoded; charset=utf-8",
	            success: function (data) {
	                if (data.code==0){
	                 
	                    $('#words_img1').val(data.path);
	                }else{
	                	alert(data.info);
	                }
	            }
	        });
	    });
		
		
		document.getElementById("upload2").value='';
		
	    $("#headPic2").click(function () {
	        $("#upload2").click(); //隐藏了input:file样式后，点击头像就可以本地上传
	        $("#upload2").on("change",function(){
			
				var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
				if (objUrl) {
					$("#headPic2").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
				}
	
				// 如果确认已经选择了一张图片, 则进行上传操作
				if ($.trim($(this).val())) {
					$("#submit_btn2").trigger('click');
				}
			});
	    });
	
	     //图片上传
	    $("#submit_btn2").click(function () {
	        var imgurl = document.getElementById("upload2").value;
	        $.ajaxFileUpload({
	            url:"/admin/slider/upload?dir=words",
				secureuri:false,
	            fileElementId: "upload2", //文件上传域的ID，这里是input的ID，而不是img的
	            dataType: 'json', //返回值类型 一般设置为json
	            contentType: "application/x-www-form-urlencoded; charset=utf-8",
	            success: function (data) {
	                if (data.code==0){
	                 
	                    $('#words_img2').val(data.path);
	                }else{
	                	alert(data.info);
	                }
	            }
	        });
	    });
		
		
		document.getElementById("upload3").value='';
		
	    $("#headPic3").click(function () {
	        $("#upload3").click(); //隐藏了input:file样式后，点击头像就可以本地上传
	        $("#upload3").on("change",function(){
			
				var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
				if (objUrl) {
					$("#headPic3").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
				}
	
				// 如果确认已经选择了一张图片, 则进行上传操作
				if ($.trim($(this).val())) {
					$("#submit_btn3").trigger('click');
				}
			});
	    });
	
	     //图片上传
	    $("#submit_btn3").click(function () {
	        var imgurl = document.getElementById("upload3").value;
	        $.ajaxFileUpload({
	            url:"/admin/slider/upload?dir=words",
				secureuri:false,
	            fileElementId: "upload3", //文件上传域的ID，这里是input的ID，而不是img的
	            dataType: 'json', //返回值类型 一般设置为json
	            contentType: "application/x-www-form-urlencoded; charset=utf-8",
	            success: function (data) {
	                if (data.code==0){
	                 
	                    $('#words_img3').val(data.path);
	                }else{
	                	alert(data.info);
	                }
	            }
	        });
	    });
		
	});
	function changeBut(jumpId){
		$('#jumpId').val(jumpId);
	}
	function remove_img(num){
		$('#words_img'+num).val('');
		$('#headPic'+num).attr('src','__PUBLIC__/img/add.jpg');
	}
</script>
<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" />

        <!-- Main content -->
        <!-- 右侧 -->
        <div class="row">
            <!-- left column -->
            <form method="post"   enctype="multipart/form-data">
            <div class="col-md-12">
            	<div class="box box-primary">
	            	<div class="box-header">
	            		<h3 class="box-title">编辑单词</h3>
	            	</div>
	            	<div class="col-md-6">
	                    <div class="form-group">
	                        <div class="input-group margin">
	                            <div class="input-group-btn">
	                                <button class="btn btn-danger" type="button">单词：</button>
	                            </div><!-- /btn-group -->
	                            <input type="text" name="words_name" id="words_name" value="<{$info['words_name']}>" class="form-control" placeholder="输入完毕后移开光标读取第三方信息" required/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <div class="input-group margin">
	                            <div class="input-group-btn">
	                                <button class="btn btn-danger" type="button">读音：</button>
	                            </div><!-- /btn-group -->
								<span id="words_audio">
									<empty name="info['words_voice1']"><else /><audio controls="controls"><source src="<{$info['words_voice1']}>" type="audio/mp3" /></audio></empty>
									<empty name="info['words_voice2']"><else /><audio controls="controls"><source src="<{$info['words_voice2']}>" type="audio/mp3" /></audio></empty>
									<empty name="info['words_voice3']"><else /><audio controls="controls"><source src="<{$info['words_voice3']}>" type="audio/mp3" /></audio></empty>
								</span>
	                            <input type="hidden" id="words_voice" name="words_voice" value="<{$info['words_voice']}>" class="form-control"/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <div class="input-group margin">
	                            <div class="input-group-btn">
	                                <button class="btn btn-danger" type="button">音标：</button>
	                            </div><!-- /btn-group -->
	                            <input type="text" id="words_read" name="words_read" value="<{$info['words_read']}>" readonly="readonly" class="form-control"/>
	                        </div>
	                    </div>
	                  	<div class="box box-success">
		                     <div class="box-header">
		                         <h3 class="box-title">中文释义：</h3>
		                     </div>
		                     <div class="box-body">
		                     	<foreach name="wordsKeys" item="val">
		                         <div class="input-group" style="padding-bottom: 10px">
		                             <span class="input-group-addon"><{$key}>.</span>
		                             <input type="text" class="form-control" id="<{$key}>" name="<{$val}>" value="<{$info[$val]}>" placeholder="多个释义间用逗号隔开">
		                         </div>
		                         </foreach>
	            			</div>
		        		</div>
						
		        	</div>
	            	<div class="col-md-6">
		            	<div class="box box-success">
		                     <div class="box-header">
		                         <h3 class="box-title">例句1：</h3>
		                     </div>
		                     <div class="box-body">
		                     	<input type="text" class="form-control" id="jz_en1" name="jz_en1" value="<{$info['jz_en1']}>" placeholder="多个释义间用逗号隔开"><br/>
		                         <div class="input-group" style="padding-bottom: 10px">
		                             <span class="input-group-addon">释义：</span>
		                             <input type="text" class="form-control" id="jz_cn1" name="jz_cn1" value="<{$info['jz_cn1']}>" placeholder="多个释义间用逗号隔开">
		                         </div>
	            			</div>
		        		</div>
		        		<div class="box box-success">
		                     <div class="box-header">
		                         <h3 class="box-title">例句2：</h3>
		                     </div>
		                     <div class="box-body">
		                     	<input type="text" class="form-control" id="jz_en2" name="jz_en2" value="<{$info['jz_en2']}>" placeholder="多个释义间用逗号隔开"><br/>
		                         <div class="input-group" style="padding-bottom: 10px">
		                             <span class="input-group-addon">释义：</span>
		                             <input type="text" class="form-control" id="jz_cn2" name="jz_cn2" value="<{$info['jz_cn2']}>" placeholder="多个释义间用逗号隔开">
		                         </div>
	            			</div>
		        		</div>
		        		<div class="box box-success">
		                     <div class="box-header">
		                         <h3 class="box-title">例句3：</h3>
		                     </div>
		                     <div class="box-body">
		                     	<input type="text" class="form-control" id="jz_en3" name="jz_en3" value="<{$info['jz_en3']}>" placeholder="多个释义间用逗号隔开"><br/>
		                         <div class="input-group" style="padding-bottom: 10px">
		                             <span class="input-group-addon">释义：</span>
		                             <input type="text" class="form-control" id="jz_cn3" name="jz_cn3" value="<{$info['jz_cn3']}>" placeholder="多个释义间用逗号隔开">
		                         </div>
	            			</div>
		        		</div>
                    	<div class="form-group">
                    		<label>近义词：</label>
                            <textarea class="form-control" rows="3" name="words_similar" placeholder="多个近义词直接逗号隔开"><{$info['words_similar']}></textarea>
                        </div>
                        <div class="form-group">
                            <label>英文释义：</label>
                            <textarea class="form-control" rows="3" name="similar_cn" placeholder="请输入英文释义"><{$info['similar_cn']}></textarea>
                        </div>
                        <div class="form-group">
                            <label>注释：</label>
                            <textarea class="form-control" rows="3" name="annotation_cn" placeholder="对单词的注释"><{$info['annotation_cn']}></textarea>
                        </div>
						<div class="form-group">
                            <label>图片1(建议图片大小2M以内)：<a href="javascript:remove_img(1);">X</a></label><br>
                            <input name="words_img1" type="hidden" id="words_img1" value="<{$info['words_img1']}>">
							<input id="upload1" name="image" accept="image/*" type="file" style="display: none"/>
							<img id="headPic1" src="<empty name="info['words_img1']">__PUBLIC__/img/add.jpg<else /><{$info['words_img1']}></empty>" height="150px" style="padding: 5px">
							<button id="submit_btn1" type="button" class="btn btn-primary" style="display: none;">确定修改</button>
							<label >点击图片即可修改</label><br>
                        </div>
						<div class="form-group">
                            <label>图片2(建议图片大小2M以内)：<a href="javascript:remove_img(2);">X</a></label><br>
                            <input name="words_img2" type="hidden" id="words_img2" value="<{$info['words_img2']}>">
							<input id="upload2" name="image" accept="image/*" type="file" style="display: none"/>
							<img id="headPic2" src="<empty name="info['words_img2']">__PUBLIC__/img/add.jpg<else /><{$info['words_img2']}></empty>" height="150px" style="padding: 5px">
							<button id="submit_btn2" type="button" class="btn btn-primary" style="display: none;">确定修改</button>
							<label >点击图片即可修改</label><br>
                        </div>
						<div class="form-group">
                            <label>图片3(建议图片大小2M以内)：<a href="javascript:remove_img(3);">X</a></label><br>
                            <input name="words_img3" type="hidden" id="words_img3" value="<{$info['words_img3']}>">
							<input id="upload3" name="image" accept="image/*" type="file" style="display: none"/>
							<img id="headPic3" src="<empty name="info['words_img3']">__PUBLIC__/img/add.jpg<else /><{$info['words_img3']}></empty>" height="150px" style="padding: 5px">
							<button id="submit_btn3" type="button" class="btn btn-primary" style="display: none;">确定修改</button>
							<label >点击图片即可修改</label><br>
                        </div>
	            	</div>
	            	<div class="col-md-12">
		                <div class="box-footer">
		                    <input type="hidden" name="step" id="step" value="2" />
		                    <input type="hidden" name="words_id" value="<{$info['words_id']}>" />
		                    <input type="hidden" name="course_id" value="<{$courseId}>" />
		                    <input type="hidden" id="jumpId" name="jumpId" value="" />
							<input type="hidden" name="words_img" value="<{$info['words_img']}>" />
		                    <!--<button class="btn btn-primary" name="submit3" onclick="changeBut(2)" type="submit">上翻</button>
		                    <button class="btn btn-primary" name="submit4" onclick="changeBut(3)" type="submit">下翻</button>-->
							<if condition="$wordsPreId neq ''">
							<a href="/admin/words/edit?course_id=<{$courseId}>&words_id=<{$wordsPreId}>" class="btn btn-primary">上翻</a>
							</if>
							<if condition="$wordsNextId neq ''">
							<a href="/admin/words/edit?course_id=<{$courseId}>&words_id=<{$wordsNextId}>" class="btn btn-primary">下翻</a>
							</if>
		                    <button class="btn btn-primary" name="submit1" onclick="changeBut(1)" 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>
            	</div>
           </div>
            </form>
            <!--/.col (left) -->
        </div>
        <!-- 右侧 -->
        <!-- /.content -->
    </aside>
    <!-- /.right-side -->
</div>
<!-- ./wrapper -->
</body>
</html>