Java使用Ajax實現跨域上傳圖片功能
更新時間：2017年09月01日 16:38:32 作者：憶楓Ing
這篇文章主要介紹了Java使用Ajax實現跨域上傳圖片功能,需要的朋友可以參考下
說明 ：
圖片服務器是用Nginx搭建的，用的是PHP語言
這個功能 需要 用到兩個js文件：
jquery.js和jQuery.form.js
<script type="text/JavaScript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<form id="upload-form" enctype="multipart/form-data" method="post" action="http://u01.madailvxing.cn/images/upload.php">
<input type="file" name="pic[]">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
<input type="submit" name="sub" value="上傳" onclick="submitImgSize1Upload()">
</form>
<script type="text/javascript">
function submitImgSize1Upload() {
var postData = function( form , callback){
var form = document.getElementById("upload-form");//獲取表單的數據
var formdata = new FormData( form );//格式化表單數據
$.ajax({
url: “跨域的url",
type: "post",
data: formdata, //處理表單數據
dataType: 'json',
processData: false,
contentType: false,
//success: function(data){
// alert(data);
// },
// error: function(data){
// console.log(data);
// }
})
$(".submit-btn").on("click",function(){
postData($(this).parents("form")[0]);
})
}
下面是上傳成功截圖：
下圖是上傳成功后訪問圖片：訪問地址：http://u01.madailvxing.cn/images/2017_09/ec16243fa22a20bb7573101f955a7f83.jpg
2017_9:文件夾名
ec16243fa22a20bb7573101f955a7f83：php同事那邊隨機生成的這張圖片的文件名
總結
以上所述是小編給大家介紹的Java使用Ajax實現跨域上傳圖片功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
Springboot動態(tài)切換數據源的具體實現與原理分析
目前有個需求,需要使用不同的數據源,例如某業(yè)務要用A數據源,另一個業(yè)務要用B數據源,所以下面這篇文章主要給大家介紹了關于Springboot動態(tài)切換數據源的具體實現與原理分析,需要的朋友可以參考下2021-12-12
最近工作中遇到個需求,springboot簡單的上傳文檔或者圖片,并且進行操作,操作完后進行保存指定路徑,下面這篇文章主要給大家介紹了關于Springboot接收文件與發(fā)送文件的相關資料,需要的朋友可以參考下2023-05-05
今天帶各位小伙伴學習怎么用Java實現RSA非對稱加密算法,文中有非常詳細的解釋及代碼示例,對正在學java算法的小伙伴們很有幫助,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了2020最新eclipse安裝過程及細節(jié)，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Spring基于advisor配置aop過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
設置JavaScript自動提示-Eclipse/MyEclipse
自動提示需要2個組件，分別是：ext-4.0.2a.jsb2||spket-1.6.16.jar,需要的朋友可以參考下2016-05-05
這篇文章主要講解Struts2 Result的參數，講的比較詳細，希望能給大家做一個參考。2016-06-06
SpringBoot集成ElasticSearch的示例代碼
Elasticsearch是用Java語言開發(fā)的，并作為Apache許可條款下的開放源碼發(fā)布，是一種流行的企業(yè)級搜索引擎，本文給大家介紹SpringBoot集成ElasticSearch的示例代碼，感興趣的朋友一起看看吧2022-02-02
本文主要介紹了?java中Thread.sleep()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Reactor中的onErrorContinue?和?onErrorResume
這篇文章主要介紹了Reactor中的onErrorContinue?和?onErrorResume，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09