1. 程式人生 > >使用jquery無重新整理上傳圖片,可用於頭像預覽功能

使用jquery無重新整理上傳圖片,可用於頭像預覽功能

</pre><p><span style="font-size:14px;">html:</span></p><p></p><pre name="code" class="html"><input type="file" name="path" id="up-fileboxs"/>

<img src="<cms:getProjectBasePath/>resources/images/gravatar.gif" alt="" width="100" height="100" class="avatar">

jquery:
$('#up-filebox').fileupload({
        url: "<cms:getProjectBasePath/>user/upload",
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        maxFileSize: 2*1024*1024,
        maxNumberOfFiles:1,
        paramName:'files',
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    }).bind('fileuploaddone', function (e, data) {
    	$('.avatar').attr('src','<cms:getProjectBasePath/>'+data.result.data);
  	$('#avatar_form').find('input[name="path"]').val(data.result.data);
    });

Java:使用springMVC

<pre name="code" class="java">@RequestMapping(value = { "/upload" }, method = { RequestMethod.POST })
	@ResponseBody
	public AjaxResult upload(HttpServletRequest request){
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
		if (multipartResolver.isMultipart(request)) {
			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;

			Iterator<String> iter = multiRequest.getFileNames();
			while (iter.hasNext()) {

				// 由CommonsMultipartFile繼承而來,擁有上面的方法.
				MultipartFile file = multiRequest.getFile(iter.next());
				if (file != null) {
					String realPath = FileUtil.getUploadPath(request),dailyPath=FileUtil.getDailyPath();
					realPath+=dailyPath;
					FileUtil.createDir(new File(realPath));//建立目錄
					File attachFile=FileUtil.createTimeNewFile(realPath, file.getOriginalFilename());//建立一個新檔案
					try {
						FileUtils.copyInputStreamToFile(file.getInputStream(), attachFile);
						String savePath="/upload"+dailyPath+attachFile.getName();
						return AjaxResult.dataResult("上傳成功!", savePath);
					} catch (IOException e) {
						log.error("檔案儲存失敗!",e);
					}
				}
			}
		}
		return AjaxResult.errorResult("沒有上傳檔案");
	}	


需在springMVC配置中配置

<!-- SpringMVC上傳檔案時,需要配置MultipartResolver處理器 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="utf-8" />
		<property name="maxUploadSize" value="10485760000" />
		<property name="maxInMemorySize" value="40960" />
	</bean>


相關推薦

使用jquery重新整理圖片用於頭像功能

</pre><p><span style="font-size:14px;">html:</span></p><p></p

ajaxFileUpload.js 重新整理圖片支援多個引數同時支援 ie6-ie10

ajaxFileUpload 無重新整理上傳的原理: 在頁面動態建立 form 表單和 ifram 貞,設定 form 表單提交的目標為 ifram 貞, 將檔案域和要 post 的引數動態寫入 form 表單中,然後提交 from 表單。 通過 window.attach

ajax重新整理圖片基於springMVC

html程式碼(圖片上傳Fform表單裡的target屬性的值frameFile,是form之後的iframe的name值, 這樣的寫法是讓當前的form表單在提交表單內容的時候轉交給iframe中進行頁面中表單處理, 並且不會產生當前頁面跳轉!): <form id

【前端解決方案】input file 圖片並實現實時

前言 我最近在做自己個人部落格的時候,遇到一個前端的問題,就是如何實時預覽 input 標籤上傳的圖片。一般的 <input type="file’ /> 標籤是不能實現實時預覽的。 解決方案 可以通過 file 標籤和 js 的 FileReader 介面來實

Struts2+Ajax+Jquery重新整理圖片

####備註:這裡不詳細講解Struts2的檔案上傳知識點,想了解請點選我另外一篇文章 http://blog.csdn.net/qq_25281057/article/details/52333677 ###這裡我引用了兩個js檔案,一個Jquery和一個form表單

重新整理圖片的幾種方式

背景知識: 無重新整理上傳圖片主要還是為了在提交表單之前進行圖片的預覽。使用者體驗相對於提交表單跳轉顯示圖片的方式總還是要好一些的。 本文主要介紹三種無重新整理上傳圖片的方式   1.使用iframe子頁面的形式達到無重新整理上傳圖片的功能。首先設定一個隱藏的i

jQuery重新整理

<form action="{:url('img_upload')}" method="post" enctype="multipart/form-data" id="uploadForm"

基於iframe的重新整理檔案並返回結果

<!-- 將target配置成一個隱藏的iframe --> <form id= "form1" enctype ="multipart/form-data" action= "/F

js 圖片並轉為base64編碼+圖片+壓縮

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮 html部分 <div id="adds" class="fix"> <form id="myForm" class="clearfix left" name="myForm"> <div clas

asp.net圖片並能實現實時

前臺aspx: <script type="text/javascript">         //下面用於圖片上傳預覽功能         function setImagePreview(avalue) {             document.getE

layui-圖片使用選擇圖片->圖片圖片刪除圖片(轉載)

原文地址:https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 <!DOCTYPE html> <html> <head> <meta

檔案的動作不能太俗必須頁面重新整理

常規操作上傳檔案 1 <form action="xxx.action" method="post" enctype="multipart/form-data"> 2 <input type="file" name="userfile" multiple><br&

基於jQuery的ajax系列之用FormData實現頁面重新整理

接著上一篇ajax系列之用jQuery的ajax方法向伺服器發出get和post請求寫,這篇主要寫如何利用ajax和FormData實現頁面無重新整理的檔案上傳效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData介面。

使用最原始的http-post方式圖片 工具類已封裝 直接使用

// 上傳工具類的 .h檔案 #import <Foundation/Foundation.h> @interface IMPhotoPostTool : NSObject + (NSMutableURLRequest *)upload:(NSString *

jquery ajax 重新整理檔案到servlet

刪除檔案的表單要加入如下enctype屬性: <form id="upload" enctype="multipart/form-data"><!--//由於使用ajax上傳,不用加action和method屬性--> 要實現無重新整理上傳檔案首

jQuery+php+ajax實現重新整理檔案功能

jQuery+php+ajax實現無重新整理上傳檔案功能,還帶有上傳進度條動畫效果,支援圖片、視訊等大檔案上傳。 js程式碼

使用 CKEditor 圖片 粘貼屏幕截圖

要求 license 回調 wan ade 做成 操作 rms 粘貼 之前寫過wangEditor,那真是好用,文檔也清晰,半天就搞定了,無奈沒有對應license,只好選擇別的。 外語一般,閱讀理解都靠蒙。CKEditor官方文檔看的我雲裏霧裏,國內的博客比較少,

jquery異步圖片

類型 -type 格式 extension query log _array targe set 用ajaxfileupload.js插件實現圖片的異步上傳 html代碼 <input id="img" type="file" name="img" />

百度WebUploader圖片圖片回顯編輯查看

set 唯一性 original 無需 同名 sch nag fin enum 頁面前端使用的是bootstrap,java後端springMVC , 上傳用的WebUploader,先說說上傳圖片,回顯編輯圖片在下一篇 如果僅僅只需要上傳圖片,不需要回顯進行編輯圖片,使用

html   圖片本頁

html 上傳圖片 本頁預覽 直接上代碼<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圖片上傳預覽</title><script type="text/j