js之base64上傳圖片

首先要搭建好springmvc,詳見https://www.cnblogs.com/zzb-yp/p/9295397.html

整體思路:前端代碼包括顯示和傳參(這里的參數主要就是圖片的base64字符串),顯示主體部分是type=“file”類型的input組件和一個提交按鈕???

???????????? 后端接收傳過來的圖片的base64字符串,將其通過流的形式進行本地保存或者直接保存在數據庫中

1、簡單的兩個組件file組件和button組件

image

file的onchange屬性(在點擊選擇的文件并且與前一次的文件不相同時執行showImg()函數)

button的onclick屬性(點擊按鈕后執行saves()函數)

2、showImg()函數

image

3、saves()函數? ? ? ? (注意注意,這里我有一個寫錯了,在下面第六行的multipart/form-data中,我在下面中間少了一個"-")

image

?

4、后端:解析傳過來的參數+保存文件到本地

image

image

image

?

5、測試結果

? ? ? 連接服務器

? ? ??

? ? ? 點擊選擇文件,選擇圖片

? ? ??

? ? ? 點擊保存圖片,查看保存在本地的上傳圖片

? ? ??

?

轉載于:https://www.cnblogs.com/zzb-yp/p/9443534.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/451714.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/451714.shtml
英文地址,請注明出處:http://en.pswp.cn/news/451714.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一些常用軟件的網絡端口協議分類介紹

最近有朋友請教我有關實現校園局域網視頻功能軟件的編寫問題,涉及到端口有關的知識,自己查了一些資料,發現這篇文章總結得比較不錯,常用軟件涵蓋得比較豐富,很實用,需要用到的時候可以查閱。于是決定將這篇…

WPF 使用皮膚影響按鈕自定義

在WPF項目中使用了 Theme的皮膚后,發現自定義的按鈕全部都是 皮膚里面的樣式,如下圖: 要自定義樣式,只有不給按鈕使用皮膚樣式。 如果想給某一個控件使用樣式,在前端Xaml的控件中,設置一下屬性即可&#xf…

各種數據庫對應的jar包、驅動類名和URL格式

見:http://blog.csdn.net/xuguiyi100/article/details/7970379 maven/Java/web/bootstrapQQ群:566862629。希望更多人一起幫助我學習。 1.1. 各種數據庫對應的jar包 具體如下: 數據庫類型 對應的Jar文件 Oracle 8i classes12.zip 或…

34--替換空格

1.問題描述 請實現一個函數,把字符串 s 中的每個空格替換成"%20"。 示例 1: 輸入:s “We are happy.” 輸出:“We%20are%20happy.” 2.解題思路 由于每次替換從 1 個字符變成 3 個字符,使用字符數組可方…

HTML的xmlns的作用

作用:由于xml允許定義自己的標記,但你定義的標記和其他人定義的標記有可能相同,但表示不同的含義。當文檔交換或者共享的時候就容易產生錯誤。為避免這種錯誤產生,xml采用名字空間聲明,允許你通過一個網址來識別你的標…

樹鏈剖分 講解+模板+習題

今天我們來講一下樹鏈剖分 樹鏈剖分是什么? 樹鏈剖分是一種用來維護樹上路徑信息的在線方法,可以處理在線。 通常通過一種方法,將一棵樹剖分成若干條鏈,然后通過數據結構(線段樹,BIT等)去維護。…

navicat 批量插入 測試數據

1. 前言 遇到線上大sql執行較慢, 10s, 做優化改進時,首先想到的是在本地造出一個類似的庫環境,先本地實驗。 然后往表中創建大量數據... 2. 方案 利用mysql函數來插入大量數據 代碼 BEGIN#Routine body goes here... DECLARE id int; DECLARE driverid …

互聯網產品用戶體驗設計的三大定律

好友發過來一PPT,文件名是互聯網產品的體驗設計,認真看完,收獲頗多,其中印象最深刻的是用戶體驗可用性的三大定律,正好FasterSoft正在打造互聯網精品平臺iWorld,最需要的時候好東西就上門來了,這…

oracle 對應的JDBC驅動 版本

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 Oracle版本jdk版本推薦jar包備注Oracle 8iJDK 1.1.xclasses111.zip Oracle 8iJDK 1.1.xclasses12.zip Oracle 9iJDK 1.1.xclasses111.ja…

JSP特點

1.JSP文件必須在JSP服務器內運行。 2.JSP文件必須生成servlet才能執行。 3.JSP頁面的第一個訪問者速度慢,因為需要編譯生成Servlet。 4.JSP不需要專門的客戶端,也不需要java運行環境,因為JSP輸出到頁面是標準的HTML文件。

35--用兩個棧實現隊列

1.問題描述 用兩個棧實現一個隊列。隊列的聲明如下,請實現它的兩個函數 appendTail 和 deleteHead ,分別完成在隊列尾部插入整數和在隊列頭部刪除整數的功能。(若隊列中沒有元素,deleteHead 操作返回 -1 ) 示例 1: 輸入&#xf…

如何open一個新tab頁面

打開新tab頁的兩種方式 1 a標簽 function openwin(url) {var a document.createElement("a");a.setAttribute("href", url);a.setAttribute("target", "_blank");a.setAttribute("id", "camnpr");document.body.…

Linux中打開文件管理器的命令

在Mac中,我們可以使用open命令,在終端打開指定目錄下的文件管理器,在Linux中,同樣可以使用類似的命令:nautilus。 轉載于:https://www.cnblogs.com/chaoguo1234/p/9446106.html

final類與方法

final類---不可被繼承。 final方法---不可被覆蓋。

【Visual C++】一些開發心得與調試技巧

自己平時收集的一些技巧與心得,這里分享出來,普及一下知識。 1.如何在Release狀態下進行調試   Project->Setting>ProjectSetting對話框,選擇Release狀態。C/C標簽中的Category選General,Optimizations選Disable(Debug)&a…

36--斐波那契數列

1. 問題描述 寫一個函數,輸入n,求斐波那契(Fibonacci)數列的第 n 項。斐波那契數列的定義如下: F(0) 0, F(1) 1 F(N) F(N - 1) F(N - 2), 其中 N > 1. 斐波那契數列由 0 和 1 開始,之后的斐波那契數…

lineNumber: 1; columnNumber: 1; 前言中不允許有內容

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 我是在xml配置文件中引用別的配置文件&#xff0c;本來是這樣寫的 <import resource"spring-mybatis.xml" /> 就報這…

idea輸入法候選區不跟隨光標

環境&#xff1a; win10 idea 2017.04 搜狗8.6 問題&#xff1a; idea編輯區輸入法候選區不跟隨光標 解決&#xff1a; 輸入法改成必應輸入法 不行的話不用你動手 我自砸蛋蛋。&#xff08;保命狗頭。。&#xff09; 轉載于:https://www.cnblogs.com/yadongliang/p/9079367.htm…

C# 反射 (Reflect)

# C# 反射 &#xff08;Reflect&#xff09; 1.基本內容 我們可以使用反射動態地創建類型的實例&#xff0c;將類型綁定到現有對象&#xff0c;或從現有對象中獲取類型。然后&#xff0c;可以調用類型的方法或訪問其字段和屬性。 最基本的調用&#xff1a; Assembly assembly …

jsp中的%@ ...%

主要用來提供整個JSP 網頁相關的信息&#xff0c;并且用來設定JSP網頁的相關屬性