uploadWithForm.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. // 实现form直传无刷新并解决跨域问题
  2. function uploadWithForm(token, putExtra, config) {
  3. controlTabDisplay("form");
  4. // 获得上传地址
  5. qiniu.getUploadUrl(config, token).then(function(res){
  6. var uploadUrl = res;
  7. document.getElementsByName("token")[0].value = token;
  8. document.getElementsByName("url")[0].value = uploadUrl;
  9. // 当选择文件后执行的操作
  10. $("#select3").unbind("change").bind("change",function(){
  11. var iframe = createIframe();
  12. disableButtonOfSelect();
  13. var key = this.files[0].name;
  14. // 添加上传dom面板
  15. var board = addUploadBoard(this.files[0], config, key, "3");
  16. window.showRes = function(res){
  17. $(board)
  18. .find(".control-container")
  19. .html(
  20. "<p><strong>Hash:</strong>" +
  21. res.hash +
  22. "</p>" +
  23. "<p><strong>Bucket:</strong>" +
  24. res.bucket +
  25. "</p>"
  26. );
  27. }
  28. $(board)
  29. .find("#totalBar")
  30. .addClass("hide");
  31. $(board)
  32. .find(".control-upload")
  33. .on("click", function() {
  34. enableButtonOfSelect();
  35. // 把action地址指向我们的 node sdk 后端服务,通过后端来实现跨域访问
  36. $("#uploadForm").attr("target", iframe.name);
  37. $("#uploadForm")
  38. .attr("action", "/api/transfer")
  39. .submit();
  40. $(this).text("上传中...");
  41. $(this).attr("disabled", "disabled");
  42. $(this).css("backgroundColor", "#aaaaaa");
  43. });
  44. })
  45. });
  46. }
  47. function createIframe() {
  48. var iframe = document.createElement("iframe");
  49. iframe.name = "iframe" + Math.random();
  50. $("#directForm").append(iframe);
  51. iframe.style.display = "none";
  52. return iframe;
  53. }
  54. function enableButtonOfSelect() {
  55. $("#select3").removeAttr("disabled", "disabled");
  56. $("#directForm")
  57. .find("button")
  58. .css("backgroundColor", "#00b7ee");
  59. }
  60. function disableButtonOfSelect() {
  61. $("#select3").attr("disabled", "disabled");
  62. $("#directForm")
  63. .find("button")
  64. .css("backgroundColor", "#aaaaaa");
  65. }