2. 程式人生 > >uploadify在火狐下上傳不了的解決方案，java版（Spring+SpringMVC+MyBatis）詳細解決方案

uploadify在火狐下上傳不了的解決方案，java版（Spring+SpringMVC+MyBatis）詳細解決方案

阿新 • • 發佈：2018-11-14

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

                

由於技術選型的原因，在一個產品中，我選擇了uploadify，選擇它的原因是它有完善的技術文件說明(http://www.uploadify.com/documentation/

),唯一不足的是官方文件上的例子是用php寫的。而對與我們這些使用Java語言的小生們而言，在遇到問題後發現找到一個適合自己的例子很不好找。特別是當遇到瀏覽器相容問題的時候，找了好久最終發現按照網上的方式進行編寫了，最終還是會出現莫名其妙的問題，而繼續查詢資料的時候，發現講解的並不詳細。

下面我就把我遇到的這些問題現象、以及解決方案和大家分享一下，希望能夠幫助大家快速解決Java專案中的問題。

錯誤現象：

在：IE瀏覽器和谷歌瀏覽器中，當使用uploadify進行檔案上傳的時候，是正常的，能夠上傳成功，當使用火狐瀏覽器的時候，發現死活也上傳不了。沒有任何反應，真是氣死人啊。

解決方法：

  1. 在百度上搜索”uploadify相容性/uploadify不相容獲取”，發現搜出很多，但仔細看，發現似乎都是一個人寫的文章。解釋的主要原因是（下面一段摘抄自：http://blog.csdn.net/longlong821/article/details/7785703）：

   
 

 jquery uploadify在ie下可以正常上傳，在實現非同步上傳的時候，每一個檔案在上傳時都會提交給伺服器一個請求。每個請求都需要安全驗證，session

和cookie的校驗。是的，就是這樣。由於jquery uploadify是藉助flash來實現上傳的，每一次向後臺傳送資料流請求時，ie會自動把本地cookie儲存捆綁在一起傳送給伺服器。但firefox、chrome不會這樣做，他們會認為這樣不安全。

 
 

Session又稱為會話狀態，是Web系統中最常用的狀態，用於維護和當前瀏覽器例項相關的一些資訊。舉個例子來說，我們可以把已登入使用者的使用者名稱放在Session中，這樣就能通過判斷Session中的某個Key來判斷使用者是否登入，如果登入的話使用者名稱又是多少。

 

        我們知道，Session對於每一個客戶端（或者說瀏覽器例項）是“人手一份”，使用者首次與Web伺服器建立連線的時候，伺服器會給使用者分發一個 SessionID作為標識。SessionID是一個由24個字元組成的隨機字串。使用者每次提交頁面，瀏覽器都會把這個SessionID包含在 HTTP頭中提交給Web伺服器，這樣Web伺服器就能區分當前請求頁面的是哪一個客戶端。

 

  1. 接著結合http://www.jb51.net/article/40380.htm中的例子：

   
 

<script  type="text/javascript"> 
  $(document).ready(function() { 
    $("#fileupload").uploadify({ 
          'swf' :  '/uploadify/scripts/uploadify.swf', 
          'uploader' : '/fileupload;jsessionid=${pageContext.session.id}', 
          'auto' : true, 
          'multi' : false, 
          'buttonText' : 'BROWSE', 
          'fileDesc' : '支援格式:jpg/gif/jpeg/png/bmp.', 
          'fileExt' :  '*.jpg;*.gif;*.jpeg;*.png;*.bmp', 
          'onUploadSuccess': onUploadSuccess 
      }); 
  }); 
  </script> 

 
 

最關鍵的就是紅字那部份了，要注意的是jsessionid前面那個是個分號而不是問號，寫成問號就作為引數傳遞了

 

  1. 最後在進行搜尋，由於uploadify依賴flash，所以建議安裝針對火狐的Adobeflash外掛.

  2. 最後編寫自己的uploadify上傳例子：

               
 

1、編寫jsessionid獲取的例子，在我們專案中，我把它放在了common-session.jsp中，內容如下（這樣寫的原因是，我們的前後臺用的不同的common.jsp，為了前後臺都使用同一套的jsessionid,通過<%@ include file="common-session.jsp" %>包含進去，注意：如果不這樣做，而是分別在兩套common.jsp中寫如下的jsessionid的程式碼，最終發現要麼後臺能夠使用上傳；要麼前臺能夠使用上傳；或者前臺上傳一次之後，再去後臺上傳，發現上傳不了了，反之也是同樣的效果）：

 
 

<%@ page isELIgnored=”false”  %>

 

<%@ page language=”java” pageEncoding=”UTF-8”%>

 

<%@ taglib uri=”http://java.sun.com/jsp/jstl/core”  prefix=”c” %>

 

<%

 

String sessionid  =  session.getId();

 

%>

 

<c:set var=”jsessionid”  value=”<%=sessionid %>” scope=”session”/>

 

<script name=”systemJs”  type=”text/javascript”>

 

var jsessionid = ‘${jsessionid}’;

 

</script>

 
 

2、在common.jsp中引入上面的"common-session.jsp

 
 

3、編寫後臺java上傳邏輯，這裡我是用的是springMVC+Spring+MyBatis，後臺程式碼如下(關於下面程式碼，並非我所寫，不覺得下面的java程式碼是規範的，此處允許大家hehe 和吐槽)：

 
 

package XXXX;

 

 

 

import java.io.File;

 

import java.io.InputStream;

 

import java.util.ArrayList;

 

import java.util.Calendar;

 

import java.util.HashMap;

 

import java.util.List;

 

import java.util.Map;

 

import net.sf.json.JSONObject;

 

 

 

import org.apache.log4j.Logger;

 

/**此處略去一部分程式碼**/

 

 

 

@Controller

 

@RequestMapping(value = “/import”, method  = { RequestMethod.GET,RequestMethod.POST })

 

public class ImportController extends  BaseController{

 

         /**  用於列印日誌 */

 

         private  static final Logger logger = Logger

 

                            .getLogger(SpecialController.class);

 

        

 

/**

 

          * 圖片上傳

 

          * @param param

 

          * @param imageFile

 

          * @return

 

          */

 

         @RequestMapping(value  = “/uploadPicture”, produces = “text/json”)

 

         @ResponseBody

 

         public  String uploadPicture(@RequestParam(“file”) MultipartFile imageFile) {

 

                   Map<String,  Object> result = new HashMap<String, Object>();

 

                   if  (!imageFile.isEmpty()) {

 

                            try  {

 

                                     Calendar  calendar = Calendar.getInstance();//獲取當前時間

 

                                     //時間路徑，解壓檔案，以年月日建立資料夾

 

                                     String  dataPath =”/”+calendar.get(Calendar.YEAR)+”/”

 

                                                                 +  (calendar.get(Calendar.MONTH)+1)+”/” + calendar.get(Calendar.DATE)+”/”;

 

                                     //  原檔名

 

                                     String  srcName = imageFile.getOriginalFilename();

 

                                     //獲取上傳檔案字尾

 

                                     String  suffix = srcName.substring(srcName.lastIndexOf(“.”) + 1,

 

                                                        srcName.length()).toLowerCase();

 

                                     //隨機生成32位id,用於解壓檔案目錄

 

                                     String  uuid = UUIDGenerator.generate();

 

                                     //新的檔名，隨機的uuid;

 

                                     String  picName = uuid +”.”+suffix;

 

                                    

 

                                     //上傳圖片生成路徑

 

                                     String  imgPath =ExtendedServerConfig.getInstance()

 

                                                                 .getStringProperty(“THUMBNAIL_PATH”)+  ExtendedServerConfig.getInstance()

 

                                                                 .getStringProperty(“BACKGROUND_IMG_PATH”)+dataPath; 

 

                                     //生成圖片預覽路徑

 

                                     String  picturePath =ExtendedServerConfig.getInstance()

 

                                                        .getStringProperty(“BACKGROUND_IMG_PATH”)+dataPath+picName;

 

                                     //資料夾不存在，則建立

 

                                      File destfile = new File(imgPath);

 

                                        if(!destfile.exists()){

 

                                                  destfile.mkdirs();

 

                                        }

 

                                     //  寫檔案

 

                                     InputStream  fi = imageFile.getInputStream();

 

                                     //上傳檔案寫入到配置資料夾下

 

                                     FileUtils.writeFile(fi,  imgPath+picName);

 

                                     File  file = new File(imgPath+picName);

 

                                     if(file.exists()){

 

                                         result.put(“imgPath”, picturePath);//返回的圖片預覽路徑

 

                                         result.put(“ilename”, srcName);

 

                                     }

 

                            }  catch (Exception e) {

 

                                     e.printStackTrace();

 

                            }

 

                   }

 

 

 

                   return  JSONObject.fromObject(result).toString();

 

         }

 

}

 
 

4、編寫uploadify的js上傳方法：

 
 

/**

 

 * 背景圖片上傳

 

 * @param uploadId 背景設定中"選擇"按鈕的id

 

 * @param imgDivId 背景設定中"圖片"小預覽圖所在div的Id

 

 * @param imgSrcId 背景設定中"img標籤的id,給src賦值用到

 

 * @param bgImgPath 隱藏的文字框值，儲存的是圖片路徑，取消是用到

 

 * @param childPathOfSelectedElement 表示被選擇了的

 

 * @param posFlag 表示對應的是針對誰進行標題設定

 

 *                "0"：表示標題

 

 *                "1": 表示列表

 

 */

 

function  uploadBackgroundImg(uploadId,imgDivId,imgSrcId,bgImgPath,childPathOfSelectedElement,posFlag){

 

  

 

   $("#"+uploadId).uploadify({

 

        //是否自動上傳

 

        'auto':true,

 

        'height':37,

 

        'swf': scriptsPath+"/uploadify/uploadify.swf",

 

        //檔案選擇後的容器ID

 

        'queueID':'uploadItemList',

 

        'fileObjName':'file',

 

        //上傳處理程式

 

        'uploader': basePath+'/import/uploadPicture.action;jsessionid=' + jsessionid,

 

        //允許上傳的檔案字尾

 

        'fileTypeExts':'*.jpg;*.gif;*.png;',

 

        //上傳檔案的大小限制

 

         'fileSizeLimit':'300MB',

 

        //上傳數量

 

        'queueSizeLimit' : 1,

 

        'queueID': 'fileQueue',

 

        //上傳到伺服器，伺服器返回相應資訊到data裡

 

        'onUploadSuccess':function(file,  data,response){

 

           var o =  $.parseJSON(data);

 

           var imgPath =  o.imgPath;

 

           if(imgPath=="" ||  imgPath ==null){

 

              alert("圖片上傳不成功");

 

           }else{

 

              $("#"+imgDivId).show();

 

              var path = vPath  +imgPath;

 

              $("#"+imgSrcId).attr("src",path);

 

              $("#"+bgImgPath).val(imgPath);

 

               var id = selectedElementInfo.get("id"); //獲得id的屬性值

 

               $.tplComponentListSetting.removeCss(id,childPathOfSelectedElement,"background-image");//移除原來的背景圖片

 

               var styleCss = $("#generatedCss").text();

 

               var styleText = "#" + id + childPathOfSelectedElement +" {background-image: url('"+path+"')  !important;}";

 

            //替換或者在最後拼接

 

            styleCss += "\r\n" + styleText;

 

            $("#generatedCss").text(styleCss);

 

           

 

            //表示的是標題

 

            if("0" == posFlag){

 

新的改變

我們對Markdown編輯器進行了一些功能拓展與語法支援，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫部落格：

  1. 全新的介面設計 ，將會帶來全新的寫作體驗；
  2. 在創作中心設定你喜愛的程式碼高亮樣式，Markdown 將程式碼片顯示選擇的高亮樣式 進行展示；
  3. 增加了 圖片拖拽 功能，你可以將本地的圖片直接拖拽到編輯區域直接展示；
  4. 全新的 KaTeX數學公式 語法；
  5. 增加了支援甘特圖的mermaid語法1 功能；
  6. 增加了 多螢幕編輯 Markdown文章功能；
  7. 增加了 焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定 等功能，功能按鈕位於編輯區域與預覽區域中間；
  8. 增加了 檢查列表 功能。

功能快捷鍵

撤銷：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜體：Ctrl/Command + I
標題：Ctrl/Command + Shift + H
無序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
檢查列表：Ctrl/Command + Shift + C
插入程式碼：Ctrl/Command + Shift + K
插入連結：Ctrl/Command + Shift + L
插入圖片：Ctrl/Command + Shift + G

合理的建立標題，有助於目錄的生成

直接輸入1次#，並按下space後，將生成1級標題。
輸入2次#，並按下space後，將生成2級標題。
以此類推，我們支援6級標題。有助於使用TOC語法後生成一個完美的目錄。

如何改變文字的樣式

強調文字 強調文字

加粗文字 加粗文字

標記文字

刪除文字

引用文字

H2O is是液體。

210 運算結果是 1024.

插入連結與圖片

連結: link.

圖片: Alt

帶尺寸的圖片: Alt

當然，我們為了讓使用者更加便捷，我們增加了圖片拖拽功能。

如何插入一段漂亮的程式碼片

去部落格設定頁面，選擇一款你喜歡的程式碼片高亮樣式，下面展示同樣高亮的 程式碼片.

// An highlighted block var foo = 'bar';

生成一個適合你的列表

  • 專案
    • 專案
      • 專案
  1. 專案1
  2. 專案2
  3. 專案3
  • 計劃任務
  • 完成任務

建立一個表格

一個簡單的表格是這麼建立的：

專案 Value
電腦 $1600
手機 $12
導管 $1

設定內容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列 第二列 第三列
第一列文字居中 第二列文字居右 第三列文字居左

SmartyPants

SmartyPants將ASCII標點字元轉換為“智慧”印刷標點HTML實體。例如：

TYPE ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
Quotes "Isn't this fun?" “Isn’t this fun?”
Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

建立一個自定義列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何建立一個註腳

一個具有註腳的文字。2

註釋也是必不可少的

Markdown將文字轉換為 HTML。

KaTeX數學公式

您可以使用渲染LaTeX數學表示式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N 是通過尤拉積分

Γ ( z ) = ∫ 0 ∞ t z − 1

相關推薦

uploadify在火狐下上傳不了的解決方案，java版（Spring+SpringMVC+MyBatis）詳細解決方案

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

手把手教你如何從零開始在eclipse上搭起一個ssm（spring+springMVC+myBatis）框架

1.新建一個Maven專案 直接點選next： 選擇這個，這個是指javaWeb專案 輸入maven專案的座標 點選finish，建立專案完成 2.新增maven依賴並下載 找到剛建的maven專案下的pom.xml配置檔案，開啟： 接下來，在url和depe

STS（Spring Tool Suite）下SSM（Spring+SpringMVC+Mybatis）框架搭建

wid eight ssm ima height 項目 環境 index 寫代碼 最近在用SSM框架做一個網站，就順便把自己要做的筆記需要了解的東西都寫了下來，看看對大家學習SSM框架有沒有幫助。 開發環境： 1、win10 64位 2、spring-tool-sui

STS（Spring Tool Suite）下SSM（Spring+SpringMVC+Mybatis）框架搭建（二）

搭建 div 圖片 control 網盤 ext lmap wid 方便 繼完成controller配置並使用controller實現頁面跳轉，現連接數據庫進行登錄。 在SSM框架中，使用Mybatis與數據庫連接，因此需要配置關於mybatis的配置。 廢話少說直接開始

uploadify在火狐下上傳檔案失敗解決方案

專案上線後，客戶反映在火狐下上傳檔案失敗，測了一下果真如此；debug了下一看每次進入許可權過濾器時session都為空，然後在網上查了一大堆資料； 最後發現是falsh上傳的問題sessionid變了，這個在uploadify官網有闡述；所以只要把sessionid傳進回

關於ThinkCMF自帶插件上傳不了圖片的解決方法

.cn 方法 插件 thinkcmf 解決方法 刪除 打開 blog 文件 原因:是因為刪除了存放圖片的文件夾,這是cmf在windows的一個BUG 解決方法: 再到php.ini裏把 這個打開就解決了關於ThinkCMF自帶插件上傳不了圖片的解決方法

解決ueditor跨域請求時圖片上傳不了及圖片列表回顯路徑問題

可跳過直接看後面的重點 1、測試環境：  1. 後端部署 基於Win10+Wampserver64  2

webug第十五關:什麽？圖片上傳不了？

web png 直接 技術分享 失敗 type alt image nbsp 第十五關:什麽？圖片上傳不了？ 直接上傳php一句話失敗，將content type改為圖片 成功 webug第十五關:什麽？圖片上傳不了？

nginx配置導致ios上傳不了圖片

最近開發app遇到一個問題：ios11版本以上的手機上傳不了圖片； 環境：開發測試階段所有流程都正常，但專案部署到正式環境linux上時，發現圖片怎麼都上傳不了ftp上，卡了很久，通過Fiddler抓包工具，捕捉到異常（本人電腦不知怎麼就是捕捉不到，還導致卡機

FTP上傳問題：FTP上傳不了文…

FTP上傳問題：FTP上傳不了檔案，看下錯誤提示！ ===================================================== 530，說明密碼錯誤。 550，說明地址有錯誤，可能是盜連沒有改。 詳細的FTP錯誤列表 110 Restart marker reply. In t

Spring boot內建Tomcat的臨時目錄被刪除導致檔案上傳不了-問題解析

目錄 1、問題 2.1、 為什麼需要使用這個/tmp/tomcat*? 2.2、那個 /tmp/tomcat* 目錄為什麼不存在？ 三、解決辦法 修改 springboot

手機APP頭像上傳 Hbuider前端 PHP後端完整程式碼（已測試通）

本程式碼是在Hbuider基礎上做得開發， 話不多說直接上程式碼： 前端： HTML程式碼： <div class="users"> <div id='output'>頭像</div> <div id='dcontent' &g

忘了pull，直接修改並且commit的問題--github上傳內容前先檢查別人有沒有推送新代碼的解決方法

本地 最新 修改 完成 開始 找到 hub 沖突 span 早上來公司之後，忘了pull下最新的代碼，就直接開始在本地做更改了，而且還給commit上去了，結果推不上去，然後看見“pull”那裏顯示了有內容沒有pull下來，這下可糟了，當場就蒙圈了，不知道咋辦，幸好有學長助

vue富文本編輯，編輯自動預覽，單個圖片上傳不能預覽的問題解決：

pac themes indexof conf html_ sta spa load this //預覽<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-show="html

解決服務器上安裝不了centos7.4的問題

安裝centos7 lin ado dvd 總結 nag ear blog 修改 想必很多人在使用U盤安裝CentOS7或者ClearOS7時遇到了dracut-initqueue: Warning: dracut-initqueue timeout - starting

RedHat（小紅帽）下 yum用不了的解決辦法

由於RedHat是商業版的，通常由於沒有註冊，導致yum程式無法使用（linux下面，yum是個安裝軟體的“神器”）。此時可用CentOS的地址進行替換。下面將一步步說明如何處理： 一、刪除RedHat自帶的yum相關檔案 　　1、檔案位置：/etc/yum.conf和/e

web uploader在Firefox下上傳點選無效的解決方法

在公司專案中，做一個上傳檔案的功能，選用了百度的web uploader，按照官網上面的方法，寫好之後，在chrome下面沒有任何問題，可是在Firefox下面怎麼點選都沒有效果？ 官網上的例子在chrome和Firefox上都可以觸發。檢視官網上的HTML佈局如下： <div id=

Linux下tomcat啟動不了的解決方法

 linux下啟動tomcat的時候，如果服務啟動不成功，可以到檢視logs資料夾下的catalina.out  日誌檔案，cat我的日誌檔案可得到如下的錯誤資訊： cat catalina.out  Error: Exception thrown by the ag

解決安卓手機上傳圖片沒有拍照選項，修改後又出現的安卓手機能載入相簿和攝像頭但蘋果手機不能載入相簿的問題

<input type="file" id="choose" accept="image/*" multiple> 上面是原始碼，下面修改後可以讓安卓手機顯示攝像頭 <inp

fckEditor的使用以及圖片上傳不顯示解決

寫過部落格的都是 在寫部落格的textarea 上面有一些按鈕 類似 word 工具欄 他們其實就是xhEditor.網頁編輯器。今天記錄的也是一種網頁編輯器。就是FCkEditor。使用他需要準備前端FckEditor外掛包。可以在官網下載https://ckeditor