Home > Java > javaTutorial > body text

Master Java and use Ajax to implement cross-domain image upload function

coldplay.xixi
Release: 2020-08-24 17:24:53
forward
2044 people have browsed it

Master Java and use Ajax to implement cross-domain image upload function

[Related learning recommendations: java basic tutorial]

Description:

The image server is built with Nginx, using The language is PHP

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

The following is a screenshot of successful upload:

The following picture is the access image after successful upload: Access address: http://u01.madailvxing.cn/images/2017_09/ec16243fa22a20bb7573101f955a7f83.jpg
2017_9: Folder name

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

## Recommended related articles:

ajax video tutorial

The above is the detailed content of Master Java and use Ajax to implement cross-domain image upload function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:jb51.net
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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!