掌握Java使用Ajax实现跨域上传图片功能

掌握Java使用Ajax实现跨域上传图片功能

【相关学习推荐:java基础教程】

说明 :

图片服务器是用Nginx搭建的,用的是PHP语言

这个功能 需要 用到两个js文件:

jquery.js和jQuery.formu ~ : ` a A T.js

<script type="text/JavaScript" src="https://www.php.cn/js/jquery.js"&gx : G x Ut;&H 2 _ E Ult;/K d c - L o q , nscript&V Z - { % B mgt;
<script type=T G Y p / o"tex% ! 1 t Y & D v rt/javascript" src="https://www.php.cn/js/jquery.form.js"></scro A f ! 8 0 Kipt>
<form id="upload-f, ? B c ) x w ! }orm" encte H 8 b ; [ o m yype="multipart/form-datS S 2 [ va" method="post" action="http://u01.mada4 ( f h ] w Oilvxing.cn/images/upload.php">
<input type="file" name="pic[]">
<E 6 hinput tyJ O zpe="hidden" name="MAX_FILE_SIZE" val& s r : {ue="10000000">
<input type="submit" name="sub" value="上传" onclick="submitImgSize1_ ? lUpload()">
</form>
<script type="t5 5 F a a Fext/javascript">
function submitImgSize1Upload() {
var postData = function) 8 a ^ 5 t( form , callback)^  i v ; p 0{
var form = document.getElementById("upload-foh h 6 P ( + ; U prm");//获取表单的数据
var formdata = new FormData( form );//格式化表单数据
$.ajax({
url: “跨域的url",
type: "post",
data: formdata,  //处理表单数据
datc n 6 Y P 9aType: 'json',
processData: faG m G ~ V ? G (lse,
contentType: false,
//suc9 @ . Ocess: function(data){
// alert(data);
// },
// error: function(data){
// conS e Q = 8 y F @sole.log(data);
// }
})
$(".submit-btn^ d H").on("click",funcd  c { vtion(){
postData($(this).parents(B = u } u a ^ s"form")[0]);
})
}

下面是上传成功截图:

下图是上传成功后访问图片:访问地址:http://u01.madailvxing.cn/images/201G t %7_09/ec16243fa22^ I ) c r ; M H 5a20bb757G 9 P z V , L w3101f955a7f83.jpg
2017_9:文件夹名

en } 5 w s ^ Qc16244 K /3fa22a20bb7573101f955a7f83:php同事那边随机生成的这张图片的文件名

相关文章推荐:ajax视频教程

以上就是掌握Java使用Ajax实现跨域上传图片功能的详细内容。