Home > Java > javaTutorial > body text

Introduction to how Java uses Ajax to upload images across domains

黄舟
Release: 2017-09-02 10:26:27
Original
1717 people have browsed it

This article mainly introduces the use of Ajax in Java to realize the cross-domain image upload function. Friends who need it can refer to the following

Instructions:

The image server is built with Nginx, using PHP language

This function requires the use of two js files:

jquery.js and 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: &#39;json&#39;,
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]);
}) 
}
Copy after login

Below It is a screenshot of successful upload:

The picture below is the access picture after successful upload: Access address:

http://u01.madailvxing.cn/images/2017_09/ec16243fa22a20bb7573101f955a7f83.jpg
Copy after login

2017_9: Folder name

ec16243fa22a20bb7573101f955a7f83: The file name of this picture randomly generated by a php colleague

##Summary

The above is the detailed content of Introduction to how Java uses Ajax to upload images across domains. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template