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实现跨域上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Jenkins发送测试报告邮件过程详解

    Jenkins发送测试报告邮件过程详解

    这篇文章主要介绍了Jenkins发送测试报告邮件过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Java JDK1.5、1.6、1.7新特性整理

    Java JDK1.5、1.6、1.7新特性整理

    这篇文章主要介绍了Java JDK1.5、1.6、1.7新特性整理,需要的朋友可以参考下
    2016-10-10
  • java创建一个类实现读取一个文件中的每一行显示出来

    java创建一个类实现读取一个文件中的每一行显示出来

    下面小编就为大家带来一篇java创建一个类实现读取一个文件中的每一行显示出来的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 将java中的 string 类型转成 数组案例

    将java中的 string 类型转成 数组案例

    这篇文章主要介绍了将java中的 string 类型转成 数组案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • springboot集成websocket的四种方式小结

    springboot集成websocket的四种方式小结

    本文主要介绍了springboot集成websocket的四种方式小结,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 使用maven运行Java Main的三种方法解析

    使用maven运行Java Main的三种方法解析

    这篇文章主要介绍了使用maven运行Java Main的三种方式的相关内容,具有一定参考价值,需要的朋友可以了解下。
    2017-10-10
  • SpringBoot中的自定义Starter解读

    SpringBoot中的自定义Starter解读

    这篇文章主要介绍了SpringBoot中的自定义Starter解读,启动器模块其实是一个空的jar文件,里面没有什么类、接口,仅仅是提供辅助性依赖管理,这些依赖可能用于自动装配或者其他类库,需要的朋友可以参考下
    2023-12-12
  • 一文学会Java运算符的使用

    一文学会Java运算符的使用

    计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量,本篇通过示例详细讲解了Java中不同运算符的使用,需要的朋友可以参考下
    2022-05-05
  • spring boot项目生成docker镜像并完成容器部署的方法步骤

    spring boot项目生成docker镜像并完成容器部署的方法步骤

    这篇文章主要介绍了spring boot项目生成docker镜像并完成容器部署的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 使用spring容器在初始化Bean时前和后的操作

    使用spring容器在初始化Bean时前和后的操作

    这篇文章主要介绍了使用spring容器在初始化Bean时前和后的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09

最新评论