Java使用Ajax實現(xiàn)跨域上傳圖片功能

更新時間：2017年09月01日 16:38:32 作者：憶楓Ing

這篇文章主要介紹了Java使用Ajax實現(xiàn)跨域上傳圖片功能,需要的朋友可以參考下

說明：

圖片服務(wù)器是用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");//獲取表單的數(shù)據(jù)
var formdata = new FormData( form );//格式化表單數(shù)據(jù)
$.ajax({
url: “跨域的url",
type: "post",
data: formdata,  //處理表單數(shù)據(jù)
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同事那邊隨機生成的這張圖片的文件名

總結(jié)

以上所述是小編給大家介紹的Java使用Ajax實現(xiàn)跨域上傳圖片功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

spring boot裝載自定義yml文件
這篇文章主要為大家詳細介紹了spring boot裝載自定義yml文件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
Java手機號碼工具類示例詳解(判斷運營商、獲取歸屬地)
這篇文章主要介紹了Java手機號碼工具類示例詳解，通過手機號碼來判斷運營商獲取歸屬地，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-02-02
Java實現(xiàn)的文件上傳下載工具類完整實例【上傳文件自動命名】
這篇文章主要介紹了Java實現(xiàn)的文件上傳下載工具類,結(jié)合完整實例形式分析了java針對文件上傳下載操作的相關(guān)實現(xiàn)技巧,并且針對上傳文件提供了自動命名功能以避免文件命名重復(fù),需要的朋友可以參考下
2017-11-11
$解讀nextLine().split(“[\\s]“)的意思$
解讀nextLine().split(“[\\s]“)的意思
這篇文章主要介紹了解讀nextLine().split(“[\\s]“)的意思，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Java數(shù)據(jù)結(jié)構(gòu)之雙向鏈表的實現(xiàn)
相較單鏈表，雙向鏈表除了data與next域，還多了一個pre域用于表示每個節(jié)點的前一個元素。這樣做給雙向鏈表帶來了很多優(yōu)勢。本文主要介紹了雙向鏈表的實現(xiàn)，需要的可以參考一下
2022-10-10
將本地jar包安裝進入maven倉庫(實現(xiàn)方法)
下面小編就為大家?guī)硪黄獙⒈镜豭ar包安裝進入maven倉庫(實現(xiàn)方法)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Java你不了解的大數(shù)型BigInteger與BigDecimal類
這篇文章主要介紹了Java 處理超大數(shù)類型之BigInteger與BigDecimal案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2022-05-05
Java OpenCV圖像處理之背景消除
GMM（高斯混合模型）是基于像素樣本統(tǒng)計信息的背景表示方法，利用像素在較長時間內(nèi)大量樣本值的概率密度等統(tǒng)計信息表示別境，然后使用統(tǒng)計差分進行目標像素判斷達到預(yù)期效果。本文將利用GMM方法實現(xiàn)圖像背景消除，需要的可以參考一下
2022-02-02
詳解OpenCV For Java環(huán)境搭建與功能演示
這篇文章主要介紹了x詳解OpenCV For Java環(huán)境搭建與功能演示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Java并發(fā)編程this逃逸問題總結(jié)
本篇文章給大家詳細分析了Java并發(fā)編程this逃逸的問題分享，對此有需要的朋友參考下。
2018-02-02