image view

src/main/java/com/rebuild/server/helper/QiniuCloud.java

@@ -190,8 +190,14 @@ public class QiniuCloud {
 		if (fileName.contains("__")) {
 			fileName = fileName.replace("__", "_");
 		}
-		if (fileName.length() > 43) {
-			fileName = fileName.substring(0, 20) + "..." + fileName.substring(fileName.length() - 20);
+		if (fileName.contains("+")) {
+			fileName = fileName.replace("+", "");
+		}
+		if (fileName.contains("#")) {
+			fileName = fileName.replace("#", "");
+		}
+		if (fileName.length() > 41) {
+			fileName = fileName.substring(0, 20) + "-" + fileName.substring(fileName.length() - 20);
 		}
 		
 		String datetime = CalendarUtils.getDateFormat("yyyyMMddHHmmssSSS").format(CalendarUtils.now());

src/main/java/com/rebuild/web/common/FileViewerControll.java

@@ -27,7 +27,6 @@ import java.io.OutputStream;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
-import org.apache.commons.io.IOUtils;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
@@ -36,6 +35,7 @@ import com.rebuild.server.helper.QiniuCloud;
 import com.rebuild.server.helper.SysConfiguration;
 import com.rebuild.web.BaseControll;
 
+import cn.devezhao.commons.CodecUtils;
 import cn.devezhao.commons.web.ServletUtils;
 
 /**
@@ -53,12 +53,17 @@ public class FileViewerControll extends BaseControll {
 		String filePath = request.getRequestURI();
 		filePath = filePath.split("/filex/img/")[1];
 		
-		int minutes = 60;
+		int minutes = 24 * 60;
 		ServletUtils.addCacheHead(response, minutes);
 		
 		// Local storage
 		if (!QiniuCloud.instance().available()) {
-			response.setContentType("image/jpeg");
+			String fileName = parseFileName(filePath);
+			String mimeType = request.getServletContext().getMimeType(fileName);
+			if (mimeType != null) {
+				response.setContentType(mimeType);
+			}
+			
 			writeLocalFile(filePath, response);
 			return;
 		}
@@ -80,6 +85,7 @@ public class FileViewerControll extends BaseControll {
 		if (!QiniuCloud.instance().available()) {
 			String fileName = parseFileName(filePath);
 			response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
+			
 			ServletUtils.setNoCacheHeaders(response);
 			writeLocalFile(filePath, response);
 			return;
@@ -108,22 +114,21 @@ public class FileViewerControll extends BaseControll {
 	 * @param response
 	 */
 	protected static boolean writeLocalFile(String filePath, HttpServletResponse response) throws IOException {
+		filePath = CodecUtils.urlDecode(filePath);
 		File tmp = SysConfiguration.getFileOfTemp(filePath);
 		if (!tmp.exists()) {
-			response.sendError(404);
+			response.sendError(HttpServletResponse.SC_NOT_FOUND);
 			return false;
 		}
 		
 		try (InputStream fis = new FileInputStream(tmp)) {
+			response.setContentLength(fis.available());
+			
 			OutputStream os = response.getOutputStream();
-			try {
-				int count = 0;
-				byte[] buffer = new byte[1024 * 1024];
-				while ((count = fis.read(buffer)) != -1) {
-					os.write(buffer, 0, count);
-				}
-			} finally {
-				IOUtils.closeQuietly(os);
+			int count = 0;
+			byte[] buffer = new byte[1024 * 1024];
+			while ((count = fis.read(buffer)) != -1) {
+				os.write(buffer, 0, count);
 			}
 			return true;
 		}

src/main/webapp/account/settings.jsp

@@ -78,7 +78,7 @@
 											<img alt="Avatar" src="<%=theUser.getAvatarUrl(true)%>">
 											<label>
 												<i class="zmdi zmdi-camera"></i><br>更改头像
-												<input type="file" id="avatar-input" accept="image/*">
+												<input type="file" id="avatar-input" accept="image/png,image/jpeg,image/gif">
 											</label>
 										</div>
 										<div class="clearfix"></div>

src/main/webapp/assets/js/rb-forms.jsx

@@ -527,9 +527,10 @@ class RbFormImage extends RbFormElement {
     let that = this
     let mp
     $createUploader(this.refs['upload-input'], function (res) {
-      if (!mp) mp = new Mprogress({ template: 2, start: true })
-      mp.set(res.percent / 100)
+      if (!mp) mp = new Mprogress({ template: 1, start: true })
+      mp.set(res.percent / 100)  // 0.x
     }, function (res) {
+      if (mp) mp.end()
       let paths = that.state.value
       paths.push(res.key)
       that.handleChange({ target: { value: paths } }, true)
@@ -736,7 +737,7 @@ class RbFormAvatar extends RbFormElement {
     return (
       <div className="img-field avatar">
         <span title="选择头像图片">
-          <input type="file" className="inputfile" ref="upload-input" id={this.props.field + '-input'} accept="image/*" />
+          <input type="file" className="inputfile" ref="upload-input" id={this.props.field + '-input'} accept="image/png,image/jpeg,image/gif" />
           <label htmlFor={this.props.field + '-input'} className="img-thumbnail img-upload">
             <img src={aUrl} />
           </label>
@@ -755,21 +756,13 @@ class RbFormAvatar extends RbFormElement {
   componentDidMount() {
     super.componentDidMount()
     let that = this
-    $(that.refs['upload-input']).html5Uploader({
-      name: that.props.field,
-      postUrl: rb.baseUrl + '/filex/upload?cloud=auto&type=image',
-      onClientLoad: function (e, file) {
-        if (file.type.substr(0, 5) !== 'image') {
-          rb.highbar('请上传图片')
-          return false
-        }
-      },
-      onSuccess: function (d) {
-        d = JSON.parse(d.currentTarget.response)
-        if (d.error_code === 0) {
-          that.handleChange({ target: { value: d.data } }, true)
-        } else rb.hberror(d.error_msg || '上传失败，请稍后重试')
-      }
+    let mp
+    $createUploader(this.refs['upload-input'], function (res) {
+      if (!mp) mp = new Mprogress({ template: 1, start: true })
+      mp.set(res.percent / 100)  // 0.x
+    }, function (res) {
+      if (mp) mp.end()
+      that.handleChange({ target: { value: res.key } }, true)
     })
   }
 }

src/main/webapp/assets/js/user-settings.jsx

@@ -2,22 +2,9 @@
 $(document).ready(function () {
   if (location.hash === '#secure') $('.nav-tabs a:eq(1)').trigger('click')
 
-  $('#avatar-input').html5Uploader({
-    name: 'avatar-input',
-    postUrl: rb.baseUrl + '/filex/upload?cloud=auto&type=image',
-    onClientLoad: function (e, file) {
-      if (file.type.substr(0, 5) !== 'image') {
-        rb.highbar('请上传图片')
-        return false
-      }
-    },
-    onSuccess: function (d) {
-      d = JSON.parse(d.currentTarget.response)
-      if (d.error_code === 0) {
-        let aUrl = `${rb.baseUrl}/filex/img/${d.data}?imageView2/2/w/100/interlace/1/q/100`
-        $('.avatar img').attr({ 'src': aUrl, 'data-src': d.data })
-      } else rb.hberror(d.error_msg || '上传失败，请稍后重试')
-    }
+  $createUploader('#avatar-input', null, function (res) {
+    let aUrl = `${rb.baseUrl}/filex/img/${res.key}?imageView2/2/w/100/interlace/1/q/100`
+    $('.avatar img').attr({ 'src': aUrl, 'data-src': res.key })
   })
 
   $('.J_email').click(() => { renderRbcomp(<DlgChangeEmail />) })