1. 程式人生 > >jQuery上傳外掛Uploadify使用Demo、本地上傳(ssm框架下)

jQuery上傳外掛Uploadify使用Demo、本地上傳(ssm框架下)

maven/Java/web/bootstrapQQ群:566862629。希望更多人一起幫助我學習。

效果:


1. jar包匯入:

<!-- 檔案上傳元件 -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>

2.  在spring的配置檔案中加上:
<!-- 支援檔案上傳 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	 <!-- 請求編碼格式 -->
    	 <property name="defaultEncoding" value="utf-8"></property>
    	 <!-- 上傳檔案大小(單位:位元組) -->
         <property name="maxUploadSize" value="50000000"></property>
         <!-- 緩衝區大小(單位:KB) -->
         <property name="maxInMemorySize" value="1024"></property>
    </bean>

3.   從官網上下載可用的版本解壓後新增到專案中,webapp下位置任意:


4. jsp頁面:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/css/uploadify/uploadify.css" type="text/css">
</head>
<body >

	<div class="container">
		<h2>Basic Demo</h2>
		 <div id="fileQueue"></div>
		<input type="file" name="file_upload" id="upload" />	
		<img id="img" style="width: 300px; height:250px;" src="images/uploadImgs/no_img.jpg" alt="image" />	
	</div>
	<hr>
	
	<script src="/js/jquery.min.js"></script>
	<!-- uploadify -->
	<script src="/css/uploadify/jquery.uploadify.js"></script>

	<script type="text/javascript">
        $(document).ready(function(){
        	
        	$("#upload").uploadify({
				swf:"/css/uploadify/uploadify.swf",
				uploader:"/system/updHeadImage",
				fileObjName:"uploadFile",  // 控制器中引數名稱
				auto:true,
				fileSizeLimit:"1024KB",
				fileTypeExts:"*.jpg;*.gif;*.png;",
				onUploadSuccess:function(file, result, response) {
					if(result){
						// 設定圖片路徑
						$("#img").attr("src",result);
					}
					// 上傳失敗
				}
			});
        	
        });
    </script> 

</body>
</html>


5.控制器:

/**
	 * 修改頭像
	 * @return
	 * @throws Exception
	 */
	@ResponseBody
	@RequestMapping(value="updHeadImage")
	public String updHeadImage(MultipartFile uploadFile ,HttpServletRequest request) throws Exception {
		
		_logger.info("+++++++++++++++++++++++ 執行修改頭像  操作 +++++++++++++++++++++++ ");
		
		File targetFile;
		// 儲存路徑
        String msgUrl = "";
        // 是否上傳成功標誌
        boolean flag = false;
        // 取圖片的原始名稱、字尾
        String fileName = uploadFile.getOriginalFilename();
        if(fileName != null && fileName != ""){   
        	// 儲存路徑
            String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/images/uploadImgs/";
            // 檔案儲存位置
            String path = request.getSession().getServletContext().getRealPath("/images/uploadImgs/");
            // 檔案字尾
//            String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());
            // 新的檔名
//            fileName = new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;
            String today = DateUtil.getDate(DateUtil.yyyy_M_d);
            File fileToo =new File(path+"/"+today); 
            // 如果資料夾不存在則建立    
            if(!fileToo .exists()  && !fileToo .isDirectory()){       
            	fileToo .mkdir();  
            }
            targetFile = new File(fileToo, fileName);
            try {
            	uploadFile.transferTo(targetFile);
            	msgUrl = returnUrl+today+"/"+fileName;
            	flag = true;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        if(flag){
        	return msgUrl;
        }
		return null;
	}


6.修改英文為中文見:

相關推薦

jQuery外掛Uploadify使用Demo本地ssm框架

maven/Java/web/bootstrapQQ群:566862629。希望更多人一起幫助我學習。 效果: 1. jar包匯入: <!-- 檔案上傳元件 --> &l

sublime3使用:自定義快捷鍵外掛安裝語法校驗css和js

1.快捷鍵大全: https://mp.csdn.net/postedit/84336764 2.新增快捷鍵: 例:ctrl+q 開啟sublime編輯器 preference>>key bindings-user>>編輯設定文件, 輸入 { "key

分頁外掛pageHelpler的使用ssm框架伺服器端分頁

1. maven依賴: <!-- 分頁外掛 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>page

使用jquery的imagecropper外掛做使用者頭像 相容移動端

相信大多的使用者系統裡都有使用者自定義頭像上傳這個功能,我這今天也在寫這塊,我將程式碼貼出來,方便以後大家借鑑。 實現方案:使用jquery的imagecropper.js外掛中裁剪功能來實現 程式碼量很少就沒有寫註釋了 css <styl

jQuery使用ajaxfileupload外掛實現ajax檔案

<!-- 引入相關的js檔案,相對路徑 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"

jquery ajaxFileUpload.js外掛支援多檔案的方法

ajaxFileUpload是一款基於jQuery的ajax上傳方式的檔案上傳外掛,它沒有對上傳控制元件作美化(使用原生態的上傳控制元件),只是提供了非同步上傳的功能,但用它來作非同步上傳確實很簡單和方便。下來我來說說使用步驟:      一:引入JS檔案——ajaxFil

檢查是否是圖片限制畫素圖片時預覽點選預覽圖在新頁面檢視原圖圖片

在做網站後臺管理時,涉及到了圖片的上傳,經過多次改動後,上傳圖片的一系列步驟如下 1.在點選瀏覽按鈕時彈出框只出現圖片格式的檔案,可在input type=file中通過accept=".jpg,.png,.jpeg" 限制。 增加限制前: 增加限制後: 但在上圖示紅處選擇所有檔案時又會

文件ajax文件

submit display gin lap 成功 eth pre views ssd 一、普通上傳文件 1 後臺 from django.shortcuts import render,HttpResponse # Create your views here. d

用git將本地分支到遠端的自己的分支非master分支

      上一篇部落格講了用git從遠端倉庫clone非master分支到本地,本篇部落格講一下將本地分支上傳到遠端的自己的分支(非master分支),就直接貼步驟了。        這個上傳到遠端倉

【React踩坑記四】React專案中引入並使用js-xlsx外掛(結合antdesign的元件)

最近有一個前端上傳並解析excel/csv表格資料的需求。 於是在github上找到一個14K star的前端解析外掛 github傳送門 官方也有,奈何實在太過於淺薄。於是做了以下整理,避免道友們少走一些彎路。 安裝依賴 yarn add xlsx //或 npm install xlsx 專案中引入

ssm 框架文件功能

quest let mail body ring upload gem 擴展 stream 這兩天在弄上傳文件(圖片或視頻)的功能 ,特記錄於此,其核心是字符串的拼接路徑。要求是:服務器上(Tomcat為例)保存上傳的圖片或視頻,數據庫中插入相對路徑。數據庫中的A表設置一個

WebLogic 任意文件 遠程代碼執行漏洞 CVE-2018-2894------->>>任意文件檢測POC

htm input ade print out vcg exc ops 上傳 前言: Oracle官方發布了7月份的關鍵補丁更新CPU(Critical Patch Update),其中針對可造成遠程代碼執行的高危漏洞 CVE-2018-2894 進行修復: http:

微信小程式多媒體檔案及下載springboot框架

/** * 微信檔案上傳介面 * @param file 待上傳檔案的完整路徑 */ public FileUploadOrDownload uploadTempMedia(String file) { /

springmvc請路徑引數,springmvc-json-ajax使用,springmvc檔案,springmvc檔案下載,springmvc攔截器內容較多

按照操作,絕對都可以實現,親測。。。。。(專案所有檔案和目錄結構全都放上去了) idea工具,建立maven專案 第一步: 放置各種配置檔案: pom.xml <?xml version="1.0" encoding="UTF-8"?> <p

關於百度編輯器圖片和視訊的具體步驟絕對能用

過年之後來到公司的第一件事就是整後臺的上傳圖片和視訊到圖片伺服器,也就是到指定的路勁,這個功能很實用。以前用的ckeditor,現在我給整成了百度編輯器,以下是使用方法。親測可用 我也是在網上找了好幾天的資料,說實話,好多人出現的問題都不一樣,所以導致現在網上的眾說紛紜也只

ssm框架的SpringMVC檔案的三種方式

commonsmultipartresolver 的原始碼,可以研究一下 點我 前端程式碼: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncodin

SSM框架檔案的下載無內容時js彈窗提示

SSM框架下檔案的上傳下載 非全部原創,僅用來記錄學習過的內容,自己添加了js判空彈窗的功能 1.首先我們建立一個測試用的jsp頁面,程式碼如下。 <%@ page language="java" contentType="text/html;

Scala+Spark+Hadoop+IDEA實現WordCount單詞計數,並執行任務簡單例項-

                 Scala+Spark+Hadoop+IDEA上傳並執行任務 本文接續上一篇文章,已經在IDEA中執行Spark任務執行完畢,測試成功。 一、打包 1.1  將setMaster註釋掉 package day05 import

CentOS構建squid傳統代理,透明代理squid3.4.6

src 存放位置 pid run regex img rest roc 客戶端設置 1.1 squid服務基礎 1.1.1 緩存代理概述 1、代理的工作機制 當客戶機通過代理來請求Web頁面時,指定的代理服務器會先檢查自己的緩存,如果緩存中已經有客戶機需要訪問的頁面,則直接

CentOS7squid的部署及兩種模式4.1版本

我們 tar zxvf 無法 poll() config check var 創建 其他 CentOS7上squid的部署及兩種模式(4.1版本) 簡介 squid是什麽? Squid是一種用來緩沖Internet數據的軟件。它接受來自人們需要下載的目標(object