您现在的位置是:群英 > 开发技术 > 编程语言
了解Java用Ajax实现跨域上传图片功能,方法是什么?
Admin发表于 2022-05-31 17:44:56722 次浏览
这篇文章主要给大家介绍“了解Java用Ajax实现跨域上传图片功能,方法是什么?”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考,希望这篇“了解Java用Ajax实现跨域上传图片功能,方法是什么?”文章能对大家有所帮助。

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

说明 :

图片服务器是用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实现跨域上传图片功能,方法是什么?”的内容就介绍到这,感谢各位的阅读,相信大家对了解Java用Ajax实现跨域上传图片功能,方法是什么?已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: ajax
相关信息推荐
2022-04-26 14:23:24 
摘要:简单起见,输入为一个可能人脸的Bitmap,并且假定目标是识别出一个人脸而已。输出为一个以人脸为中心的原图的部分切图。如果需要自定义长宽比例,或者只需要定位人脸位置,来半侧切图,可以稍加改动实现。
2022-07-23 17:41:55 
摘要:本篇文章给大家带来了关于python的相关知识,其中主要整理了Tkinter的相关问题,Tkinter 是使用 python 进行窗口视窗设计的模块,下面一起来看一下,希望对大家有帮助。
2022-10-11 09:22:59 
摘要:本文主要介绍了Maven导入本地jar包的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部