查看: 617|回复: 0

[Java语言] Java使用Ajax实现跨域上传图片功能

发表于 2017-10-3 13:33:18
尚学堂AD

说明 :

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

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

jquery.js和jQuery.form.js

  1. <script type="text/JavaScript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.form.js"></script>
  3. <form id="upload-form" enctype="multipart/form-data" method="post" action="http://u01.madailvxing.cn/images/upload.php">
  4. <input type="file" name="pic[]">
  5. <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
  6. <input type="submit" name="sub" value="上传" onclick="submitImgSize1Upload()">
  7. </form>
  8. <script type="text/javascript">
  9. function submitImgSize1Upload() {
  10. var postData = function( form , callback){
  11. var form = document.getElementById("upload-form");//获取表单的数据
  12. var formdata = new FormData( form );//格式化表单数据
  13. $.ajax({
  14. url: “跨域的url",
  15. type: "post",
  16. data: formdata, //处理表单数据
  17. dataType: 'json',
  18. processData: false,
  19. contentType: false,
  20. //success: function(data){
  21. // alert(data);
  22. // },
  23. // error: function(data){
  24. // console.log(data);
  25. // }
  26. })
  27. $(".submit-btn").on("click",function(){
  28. postData($(this).parents("form")[0]);
  29. })
  30. }
复制代码

下面是上传成功截图:

下图是上传成功后访问图片:访问地址:http://u01.madailvxing.cn/images ... 573101f955a7f83.jpg
2017_9:文件夹名

ec16243fa22a20bb7573101f955a7f83:php同事那边随机生成的这张图片的文件名

总结

以上所述是小编给大家介绍的Java使用Ajax实现跨域上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!



回复

使用道具 举报