图片上传

editor.iml

@@ -40,8 +40,6 @@
    <orderEntry type="library" scope="TEST" name="Maven: org.springframework:spring-test:4.2.4.RELEASE" level="project" />
    <orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-web:1.3.2.RELEASE" level="project" />
    <orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-tomcat:1.3.2.RELEASE" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-core:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-el:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-logging-juli:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-websocket:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.springframework.boot:spring-boot-starter-validation:1.3.2.RELEASE" level="project" />
@@ -90,5 +88,11 @@
    <orderEntry type="library" name="Maven: org.json:json:20160212" level="project" />
    <orderEntry type="library" name="Maven: com.google.guava:guava:17.0" level="project" />
    <orderEntry type="library" name="Maven: org.apache.commons:commons-lang3:3.3.2" level="project" />
    <orderEntry type="library" name="Maven: javax.servlet:jstl:1.2" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-jasper:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-core:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.apache.tomcat.embed:tomcat-embed-el:8.0.30" level="project" />
    <orderEntry type="library" name="Maven: org.eclipse.jdt.core.compiler:ecj:4.4.2" level="project" />
    <orderEntry type="library" name="Maven: repository.org.apache.httpcomponents:httpclient:4.3.4" level="project" />
  </component>
</module>

pom.xml

@@ -19,6 +19,7 @@
	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>
@@ -87,6 +88,24 @@
			<artifactId>commons-lang3</artifactId>
			<version>3.3.2</version>
		</dependency>
		<dependency>
			 <groupId>javax.servlet</groupId>
			 <artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>compile</scope>
		</dependency>
		<dependency>
			<groupId>repository.org.apache.httpcomponents</groupId>
			<artifactId>httpclient</artifactId>
			<version>4.3.4</version>
		</dependency>
	</dependencies>
	
	<build>

src/main/java/com/yihu/editor/controller/ArticleController.java

@@ -11,7 +11,10 @@ import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;
import java.util.Date;
import java.util.List;
@@ -44,7 +47,8 @@ public class ArticleController extends BaseController{
    @RequestMapping(value = "/toEdit",method = RequestMethod.GET)
    public String toEdit(@RequestParam(value = "id")String id,ModelMap modelMap){
        modelMap.addAttribute("id", id);
        YdfHealthEduArticle article = articleService.findById(id);
        modelMap.addAttribute("article", article);
        return "add";
    }
@@ -90,14 +94,62 @@ public class ArticleController extends BaseController{
    @RequestMapping(value = "/save", method = RequestMethod.POST)
    @ResponseBody
    public String save(@ModelAttribute @Valid YdfHealthEduArticle article){
    public String save(@ModelAttribute @Valid YdfHealthEduArticle article,HttpServletRequest request,MultipartHttpServletRequest multiReq){
        List<MultipartFile> files = multiReq
                .getFiles("file");
        //---------------------------------------cyx
        String url="http://172.19.103.31:10001/ydf17-6-10/upload/image?callback=call";
        /*HttpClient httpClient = null;
        HttpPost httpPost;
        String result = null;
        try {
            httpClient = new DefaultHttpClient();
            httpPost = new HttpPost(url);
            String[] filenames=fileNames.split(";");
            MultipartEntity reqEntity = new MultipartEntity();
            for(int i=0;i<filenames.length;i++) {
                String fileName=filenames[i];
                FileBody file = new FileBody(new File(fileName));
                reqEntity.addPart("file"+i, file);// file1为请求后台的File upload;属性
            }
            httpPost.setEntity(reqEntity);
            HttpResponse response = httpClient.execute(httpPost);
            if (null != response && response.getStatusLine().getStatusCode() == 200) {
                HttpEntity resEntity = response.getEntity();
                if (null != resEntity) {
                    result = EntityUtils.toString(resEntity, HTTP.UTF_8);
                    System.out.println(result);
                }
            }
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 关闭连接，释放资源
            httpClient.getConnectionManager().shutdown();
        }
        return result;
    }*/
        //------------------------------------------
        if(StringUtils.isBlank(article.getId())){
            article.setId(UUID.randomUUID().toString().replaceAll("-",""));
        }
        Date date = new Date();
        if(null==article.getModifyDate()){
            article.setModifyDate(date);
        }
        article.setModifyDate(date);
        if(null==article.getCreateDate()){
            article.setCreateDate(date);
        }
@@ -113,4 +165,5 @@ public class ArticleController extends BaseController{
        articleService.delete(id);
        return write(200, "删除成功");
    }
}

src/main/java/com/yihu/editor/dao/ArticleDao.java

@@ -20,4 +20,8 @@ public interface ArticleDao extends PagingAndSortingRepository<YdfHealthEduArtic
    @Modifying
    @Query("update YdfHealthEduArticle a set a.status = -1 where a.id = ?1 ")
    void delete(String id);
    @Query("select a from YdfHealthEduArticle a where a.id= ?1")
    YdfHealthEduArticle findById(String id);
}

src/main/java/com/yihu/editor/service/ArticleService.java

@@ -41,7 +41,7 @@ public class ArticleService {
        // 分页信息
        PageRequest pageRequest = new PageRequest(page - 1, rows, sort);
        // 设置查询条件
        Map<String, SearchFilter> filters = new HashMap<>();
        Map<String, SearchFilter> filters = new HashMap<String, SearchFilter>();
        if (type!=-1) {
            filters.put("type", new SearchFilter("type", SearchFilter.Operator.EQ, type));
        }
@@ -68,4 +68,8 @@ public class ArticleService {
    public void delete(String id) {
        articleDao.delete(id);
    }
    public YdfHealthEduArticle findById(String id) {
        return articleDao.findById(id);
    }
}

src/main/resources/application.yml

@@ -12,7 +12,10 @@ spring:
    password: 123456
    driverClassName: com.mysql.jdbc.Driver
  # Specify the DBMS
  http:
    encoding:
      charset: UTF-8
      enabled: true
  jpa:
    database: MYSQL
    show-sql: true
@@ -27,3 +30,5 @@ spring:
    view:
      prefix: /pages/
      suffix: .jsp

src/main/webapp/js/zzxUpload.js

@@ -0,0 +1,263 @@
var ZZXUpload = function(form, url, complete,noprocess) {
	if (url === null || url === '') {
		alert('url 不能为空！');
		return false;
	}
	var _self = this;
	var ZZXUpload, formData;
	_self.formData = $(form).length > 0 ?  new FormData($(form)[0]) : new FormData();
	_self.url = url;
	_self.put = function(key, val) {
		_self.formData.append(key, val);
	}
	_self.upload = function(files) {
		uploadFiles(files);
		/*
		 * _self.files = files; _self.files.length > 0 ?
		 * uploadFile(_self.files.shift()) : '';
		 */
	}
	var processFiles = function(files) {
		var file, _i, _len;
		for (_i = 0, _len = files.length; _i < _len; _i++) {
			file = files[_i];
			file.processing = true;
			file.status = Dropzone.UPLOADING;
			$(file.previewTemplate).addClass("dz-processing");
		}
		return uploadFiles(files);
	}
	var uploadFiles = function(files) {
		var file, formData, handleError, headerName, headerValue, headers, i, input, inputName, inputType, key, method, option, progressObj, response, updateProgress, url, value, xhr, _i, _j, _k, _l, _len, _len1, _len2, _len3, _m, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
		xhr = new XMLHttpRequest();
		for (_i = 0, _len = files.length; _i < _len; _i++) {
			file = files[_i];
			file.xhr = xhr;
		}
		xhr.open('post', _self.url, true);
		response = null;
		handleError = (function(_this) {
			return function() {
				var _j, _len1, _results;
				_results = [];
				for (_j = 0, _len1 = files.length; _j < _len1; _j++) {
					file = files[_j];
				}
				return _results;
			};
		})(this);
		updateProgress = (function(_this) {
			return function(e) {
				var allFilesFinished, progress, _j, _k, _l, _len1, _len2, _len3, _results;
				if (e != null) {
					progress = 100 * e.loaded / e.total;
					for (_j = 0, _len1 = files.length; _j < _len1; _j++) {
						file = files[_j];
						file.upload = {
							progress : progress,
							total : e.total,
							bytesSent : e.loaded
						};
					}
				} else {
					allFilesFinished = true;
					progress = 100;
					for (_k = 0, _len2 = files.length; _k < _len2; _k++) {
						file = files[_k];
						if (!(file.upload.progress === 100 && file.upload.bytesSent === file.upload.total)) {
							allFilesFinished = false;
						}
						file.upload.progress = progress;
						file.upload.bytesSent = file.upload.total;
					}
					if (allFilesFinished) {
						return;
					}
				}
				_results = [];
				for (_l = 0, _len3 = files.length; _l < _len3; _l++) {
					file = files[_l];
					_results.push(uploadprogress(file, progress,
							file.upload.bytesSent));
				}
				return _results;
			};
		})(this);
		xhr.onload = (function(_this) {
			return function(e) {
				var _ref;
				if(files.length > 0){
					if (files[0].status === Dropzone.CANCELED) {
						return;
					}
				}
				if (xhr.readyState !== 4) {
					return;
				}
				response = xhr.responseText;
				if (xhr.getResponseHeader("content-type")
						&& ~xhr.getResponseHeader("content-type").indexOf(
								"application/json")) {
					try {
						response = JSON.parse(response);
					} catch (_error) {
						e = _error;
						response = "Invalid JSON response from server.";
					}
				}
				if(!noprocess){
					updateProgress();
				}
				typeof complete == 'function' ? complete(xhr.status,xhr.responseText) : '';
				
				if (!((200 <= (_ref = xhr.status) && _ref < 300))) {
					return handleError();
				} else {
					return true;
				}
			};
		})(this);
		xhr.onerror = (function(_this) {
			return function() {
				if (files[0].status === Dropzone.CANCELED) {
					return;
				}
				return handleError();
			};
		})(this);
		progressObj = (_ref = xhr.upload) != null ? _ref : xhr;
		progressObj.onprogress = updateProgress;
		headers = {
			"Accept" : "application/json",
			"Cache-Control" : "no-cache",
			"X-Requested-With" : "XMLHttpRequest"
		};
		for (headerName in headers) {
			headerValue = headers[headerName];
			xhr.setRequestHeader(headerName, headerValue);
		}
		formData = _self.formData;
		if(files.length > 0){
			for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) {
				
				var paramName = files[i].paramName == null ? files[i].name : files[i].paramName;
				paramName = paramName + '_' + i;
				formData.append(paramName, files[i]);
			}
		}
		return xhr.send(formData);
	};
	var uploadprogress = function(file, progress, bytesSent) {
		var node, _i, _len, _ref, _results;
		if (file.previewElement) {
			_ref = $(file.previewElement).find('[data-dz-uploadprogress]');
			_results = [];
			for (_i = 0, _len = _ref.length; _i < _len; _i++) {
				node = _ref[_i];
				if (node.nodeName === 'PROGRESS') {
					_results.push(node.value = progress);
				} else {
					_results.push(node.style.width = "" + progress + "%");
				}
			}
			return _results;
		}
	}
	var uploadFile = function(file) {
		var formData, handleError, input, inputElement, inputName, progressObj, xhr, _i, _len, _ref, _ref1, _this = this;
		xhr = new XMLHttpRequest();
		formData = new FormData();
		formData.append(file.name, file);
		xhr.open("POST", _self.url, true);
		handleError = function() {
			return _this.errorProcessing(file, xhr.responseText
					|| ("Server responded with " + xhr.status + " code."));
		};
		xhr.onload = function(e) {
			var response;
			if (xhr.status !== 200) {
				return handleError();
			} else {
				var $preview = $(file.previewTemplate).find(
						".progress-bar-success");
				$(file.previewTemplate).find(".progress-bar-success").css({
					width : "" + 100 + "%"
				});
				response = xhr.responseText;
				if (~xhr.getResponseHeader("content-type").indexOf(
						"application/json")) {
					response = $.parseJSON(response);
				}
				$(file.previewTemplate).addClass("success");
				previewTemplate: "<div class=\"preview file-preview\">\n  <div class=\"details\">\n   <div class=\"filename\"><span></span></div>\n  </div>\n  <div class=\"progress\"><span class=\"upload\"></span></div>\n  <div class=\"success-mark\"><span>✔</span></div>\n  <div class=\"error-mark\"><span>✘</span></div>\n  <div class=\"error-message\"><span></span></div>\n</div>"
				_self.files.length > 0 ? uploadFile(_self.files.shift()) : '';
				return true;
			}
		};
		xhr.onerror = function() {
			return handleError();
		};
		progressObj = (_ref1 = xhr.upload) != null ? _ref1 : xhr;
		progressObj.onprogress = function(e) {
			var progress = Math.min(100, (e.loaded / e.total) * 100);
			var $preview = $(file.previewTemplate)
					.find(".progress-bar-success").css({
						width : "" + Math.max(0, progress + "%")
					});
			return true;
		};
		xhr.setRequestHeader("Accept", "application/json");
		xhr.setRequestHeader("Cache-Control", "no-cache");
		xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
		xhr.setRequestHeader("X-File-Name", file.name);
		return xhr.send(formData);
	};
};
/*document.write("<script src='assets/js/jquery.colorbox-min.js'></script>");
$(function($) {
	
	var $overflow = '';
	var colorbox_params = {
		rel: 'colorbox',
		reposition:true,
		scalePhotos:true,
		scrolling:false,
		previous:'<i class="ace-icon fa fa-arrow-left"></i>',
		next:'<i class="ace-icon fa fa-arrow-right"></i>',
		close:'&times;',
		current:'{current} of {total}',
		maxWidth:'100%',
		maxHeight:'100%',
		onOpen:function(){
			$overflow = document.body.style.overflow;
			document.body.style.overflow = 'hidden';
		},
		onClosed:function(){
			document.body.style.overflow = $overflow;
		},
		onComplete:function()	{
			$.colorbox.resize();
		}
	};
	$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
	//let's add a custom loading icon
	$("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange'></i>");
 });*/
function delFile(fileid){
	if(fileid!=undefined && fileid!="" && confirm('您确定要删除吗？')){
		$("#"+fileid).remove();
		var ids = $("#delFileIds").val();
		if(ids==undefined || ids==""){
			ids=fileid;
			$("#delFileIds").val(ids);
		}else{
			var tmp=ids+","+fileid;
			$("#delFileIds").val(tmp);
		}
	}
}

src/main/webapp/js/zzxUtils.js

@@ -0,0 +1,129 @@
var system ={
		win : false,
		mac : false,
		xll : false
	};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
(function(){
	var _self = this;
	//平台、设备和操作系统     
	
	//添加子项
	var addItem = function($ele,params,btns){
		if(typeof $ele != 'object'){
			throw new Error('addItem�����IJ��������Ǹ�jqueryԪ��');
		}
		var $item = $('<li class="dd-item" data-id="'+params.id+'" data-parent="'+params.parent+'"></li>').appendTo($ele);
		var $item_ele = $('<div class="dd-handle">'+params.name+'</div>').appendTo($item);
		if(btns != null){
			if(eval(btns).length > 0){
				//���ذ�ť
				var $btns = $('<div class="pull-right action-buttons"></div>').appendTo($item_ele);
				$.each(btns,function(i,val){
					var $btn = '';
					if(val.type == 'add'){
						$btn = $('<a class="green" href="#"><i class="ace-icon fa fa-plus bigger-130"></i></a>').appendTo($btns);
					}else if(val.type == 'edit'){
						$btn = $('<a class="blue" href="#"><i class="ace-icon fa fa-pencil bigger-130"></i></a>').appendTo($btns);
					}else if(val.type == 'remove'){
						$btn = $('<a class="red" href="#"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>').appendTo($btns);
					}else{
						//��������
						throw new Error('addItem�����ĵ������������� ��ʽ[{ type:"add",click:function(){} },...] type����ֵ add��edit��remove');
					}
					if(typeof val.click == 'function'){
						$btn.on('click',val.click);
						$btn.on('mousedown', function(e){
		    				e.stopPropagation();
						});
					}
				});
			}
		}
		return $item;
	}
	//添加集
	var addList = function($ele){
		if(typeof $ele != 'object'){
			throw new Error('addList�����IJ��������Ǹ�jqueryԪ��');
		}
		var $list = $('<ol class="dd-list"></ol>').appendTo($ele);
		return $list;
	}
	
	var createNestable = function($ele,jsonArray,btns){
		if($ele.length <= 0){
			throw new Error('û���ҵ�Ԫ��');
		}
		if(typeof jsonArray != 'object'){
			throw new Error('����jsonArray ������һ��json����');
		}
		var $list = addList($ele);
		//jsonArray [{id:1,name:'������Ϣ',childrens:[{},{},{}]},{id:2,name:'������Ϣ'},{id:3,name:'Ȩ����Ϣ'}]
		$.each(jsonArray,function(index,value){
			//��list���item
			var $item = addItem($list,{id:value.id,name:value.name},btns);
			if(value.childrens != null){
				createNestable($item,value.childrens,btns);
			}
		});
	}
	
	
	
	_self.ZZXUtils = {};
	_self.ZZXUtils.onMask = function(){
		$('.my-mask').remove();
		$('.page-content-area').append('<div class="my-mask"><i class="ace-icon loading-icon fa fa-spinner fa-spin fa-5x white my-center"></i></div>');
	}
	_self.ZZXUtils.unMask = function(){
		$('.my-mask').remove();
	}
	_self.ZZXUtils.showModal = function(element,fn){
		var $modal = $(element);
		if($modal.length <= 0){
			return false;
		}
		$modal.before('<div id="modalMask" class="my-mask"></div>');
		$modal.show();
		
		var $button = $modal.find('button[data-dismiss=modal]');
		$button.unbind();
		$button.bind('click',function(){
			var btn = $(this).attr('btn-type');
			$modal.parent().find('#modalMask').remove();
			$modal.hide();
			typeof fn == 'function' ? fn(btn) : '';
			return false;
		});
	}
	_self.ZZXUtils.initNestable = function(ele,jsonArray,btns){
		createNestable($(ele),jsonArray,btns);
	}
	_self.ZZXUtils.bindscroll = function($modal){
		if($modal == null || $modal.length <= 0){
			return false;
		}
		$modal.unbind('shown.bs.modal');
		$modal.on('shown.bs.modal',function(){
			//绑定滚轮事件
			$(document).unbind('mousewheel DOMMouseScroll');
			$(document).bind('mousewheel DOMMouseScroll',function(e){
				var wheeldelta = e.originalEvent.wheelDelta;
				$(document).scrollTop($(document).scrollTop() - wheeldelta);
				console.log(wheeldelta);
			});
			
			$modal.unbind('hidden.bs.modal');
			$modal.on('hidden.bs.modal',function(){
				//modal关闭时 解除绑定事件
				$(document).unbind('mousewheel DOMMouseScroll');
			});
		});
	}
})();

src/main/webapp/pages/add.jsp

@@ -1,3 +1,6 @@
<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
@@ -10,6 +13,10 @@
    <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerComboBox.js"></script>
    <script src="js/ckeditor/ckeditor.js"></script>
    <script src="js/dropzone.js"></script>
    <script src="js/zzxUpload.js"></script>
    <script src="js/zzxUtils.js"></script>
    <script src="js/jquery.filer.min.js"></script>
    <title>文章管理列表</title>
    <style>
        .content{  margin:0 auto; width:100%;  }
@@ -26,26 +33,31 @@
        .td-left{text-align: right;}
        .td-right{text-align: left;}
        .width350{width: 350px !important;}
        .jFiler-item-thumb-image img{
            width: 120px;
            height: 80px;;
        }
    </style>
</head>
<body>
    <form  id="article" onsubmit="return sub()">
    <form  id="article"   enctype="multipart/form-data" method="post" onsubmit="return sub()">
        <div class="liger-form">
            <div class="content">
                <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="30%" class="td-left"><label>标&emsp;&emsp;题：</label></td>
                        <td width="70%" class="td-right">
                            <input class="liger-textbox width350" name="title" data-label="标题" required="required" />
                            <input class="liger-textbox width350" name="title" data-label="标题" required="required" value="${article.title}" />
                            <input type="hidden" value="${article.id}" name="id" id="id">
                        </td>
                    </tr>
                    <tr>
                        <td width="30%" class="td-left"><label>文章类型：</label></td>
                        <td width="70%" class="td-right">
                            <input id="typeSelect"/>
                            <input type="hidden" name="type" id="type"/>
                            <input type="hidden" name="typeName" id="typeName"/>
                            <input type="hidden" name="type" id="type" value="${article.type}"/>
                            <input type="hidden" name="typeName" id="typeName" value="${article.typeName}"/>
                        </td>
                    </tr>
                    <tr>
@@ -59,7 +71,7 @@
                            URL：
                        </td>
                        <td width="70%" class="td-right">
                            <input type="url" id="url" name="url"  class="liger-textbox" class="width350"/>
                            <input type="url" id="url" name="url"  class="liger-textbox" class="width350" value="${article.url}"/>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
@@ -67,7 +79,7 @@
                            关&ensp;键&ensp;字：
                        </td>
                        <td width="70%" class="td-right">
                            <input name="keyword" class="liger-textbox" class="width350"/>
                            <input name="keyword" class="liger-textbox" class="width350"value="${article.keyword}"/>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
@@ -82,6 +94,12 @@
                            <input  type="hidden" name="content" id="content" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="file" id="imgFile" name="file" multiple="multiple" class="mui-pull-right">
                            <input type="button" id="uploadFile" value="上传" style="width: 80px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center">
                            <input type="reset" value="重置" style="width: 80px;">&emsp;&emsp;
@@ -89,11 +107,42 @@
                        </td>
                    </tr>
                </table>
           <%--     <form  id="uploadForm" action="http://172.19.103.31:10001/ydf17-6-10/upload/image" method="post" onsubmit="return upload()" id="uploadImg">
                </form>--%>
            </div>
        </div>
    </form>
</body>
<script>
    var url = $("#url").val();
    function call(data){
        debugger
        alert(data.city);
    }
    $("#uploadFile").click(function(){
        //jFiler-item-thumb-image
        $.ajax({
        type: "JSONP", //必须用post
        url: "http://172.19.103.31:10001/ydf17-6-10/upload/image?callback=call",
        crossDomain: true,
        data: files,
        contentType: false, //必须
        processData: false,
        //不能用success，否则不执行
        complete: function (data) {
            debugger
            var data = eval(data.responseText);
            console.log(data.Data);
        },
            success: function(data){
            debugger
            }
    });
    })
    $("#typeSelect").ligerComboBox(
        {
            url:"getArticleType",
@@ -142,7 +191,7 @@
    var editor = CKEDITOR.replace('ckeditor');
    function sub(){
        var articleFrom = $("#articleFrom").ligerComboBox().getValue();
        /*var articleFrom = $("#articleFrom").ligerComboBox().getValue();
        if(articleFrom==''){
            alert("请选择文章来源");
            return false;
@@ -161,22 +210,114 @@
                return false;
            }
        }
        $("#content").val(data);
        $("#content").val(data);*/
        debugger
        var form = new FormData($("#article")[0]);
        var fileLength = $(".jFiler-item-thumb-image img").length;
        for(var i =0;i<fileLength,i++){
            form.append(file+"",$(".jFiler-item-thumb-image img"));
        }
        $.ajax({
            cache: true,
            type: "POST",
            url:"save",
            data:$('#article').serialize(),
            type:"post",
            data:form,
            processData:false,
            async: false,
            error: function(request) {
                alert("服务器忙");
            },
            success: function(data) {
            contentType:false,
            success:function(data){
                alert("保存成功");
                window.location.href="toList";
            }
        });
        return false;
    }
    var files = [];
    var fileindex = 0;
    var bx_files=[];
    var uploadDropzone = function(obj, titleName, maxfiles, paramname, fs) {
        $(obj).filer({
            changeInput: '<div class="mui-table-view-cell my-table-col-2 img-row">\
				 		<span>'+titleName+'</span>\
				 		<span><img style="width:75px;height:50px;" class="head-img mui-action-preview" src="img/add_img.png"/></span></div>',
            showThumbs: true,
            addMore: true,
            limit: maxfiles,
            maxSize: 100,
            extensions: ['jpg', 'jpeg', 'png', 'gif'],
            templates: {
                box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
                item: '<li class="jFiler-item" style="width:50%;float:left;">\
		                        <div class="jFiler-item-container">\
		                        <div class="jFiler-item-inner">\
		                            <div class="jFiler-item-thumb">\
		                                <div class="jFiler-item-status"></div>\
		                                <a href="#"  class="'+obj.slice(1)+'">{{fi-image}}</a>\
		                            </div>\
		                            <div class="jFiler-item-assets jFiler-row jFiler-item-trash-action">\
		                            	<ul class="list-inline pull-left"></ul>\
		                                <ul class="list-inline pull-right">\
		                                    <li><a class="icon-jfi-trash"></a></li>\
		                                </ul>\
		                            </div>\
		                        </div>\
		                    </div>\
               			 </li>',
                itemAppend: '<li class="jFiler-item" style="width:50%;float:left;">\
			                        <div class="jFiler-item-container">\
			                            <div class="jFiler-item-inner">\
			                                <div class="jFiler-item-thumb">\
			                                    <div class="jFiler-item-status"></div>\
			                                    <a href="" data-rel="colorbox" class="cboxElement">{{fi-image}}</a>\
			                                </div>\
			                                <div class="jFiler-item-assets jFiler-row jFiler-item-trash-action">\
			                                	<ul class="list-inline pull-left"></ul>\
			                                    <ul class="list-inline pull-right">\
			                                        <li><a class="icon-jfi-trash"></a></li>\
			                                    </ul>\
			                                </div>\
			                            </div>\
			                        </div>\
			                    </li>',
                itemAppendToEnd: false,
                removeConfirmation: true,
                _selectors: {
                    list: '.jFiler-items-list',
                    item: '.jFiler-item',
                    remove: '.jFiler-item-trash-action'
                }
            },
            //files: communityMapList,
            onSelect:function(file){
                // 区分图片类型
                //var fileindex = 0;
                file.fileindex = fileindex++;
                file.paramName = paramname;
                files.push(file);
                fs.push(file);
            },
            onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
                if(file.fileid){
                    delFileIds.push(file.fileid);
                    itemEl.fadeOut("fast", function() {
                    });
                }else{
                    for(var i = 0; i < files.length; i++){
                        if(files[i] != null && files[i].fileindex == file.fileindex){
                            files.splice(i,1);
                        }
                    }
                    for(var i = 0; i < fs.length; i++) {
                        if(fs[i] != null && fs[i].fileindex == file.fileindex) {
                            fs.splice(i, 1);
                        }
                    }
                }
            }
        });
    };
    uploadDropzone("#imgFile", '上传图片', 5, "file", bx_files);
</script>
</html>

src/main/webapp/pages/edit_list.jsp

@@ -1,3 +1,6 @@
<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
@@ -34,7 +37,7 @@
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '90%'],
                content: 'toEdit?id="+id;' //iframe的url
                content: "toEdit?id="+id //iframe的url
            });
        }

src/main/webapp/pages/index.jsp

@@ -1,3 +1,6 @@
<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>