fenxiao_up.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. var params = {
  2. fileInput: $("#fileImage").get(0),
  3. upButton: $("#fileSubmit").get(0),
  4. url: $("#uploadForm").attr("action"),
  5. filter: function (files) {
  6. var arrFiles = [];
  7. for (var i = 0, file; file = files[i]; i += 1) {
  8. if (file.type.indexOf("image") == 0) {
  9. if (file.size >= 5120000) {
  10. mui.alert('您这张"' + file.name + '"图片大小过大', '应小于5000kB', function () {
  11. })
  12. } else {
  13. arrFiles = [];
  14. arrFiles.push(file)
  15. }
  16. } else {
  17. alert('文件"' + file.name + '"不是图片。')
  18. }
  19. }
  20. return arrFiles
  21. },
  22. onSelect: function (files) {
  23. var html = '', i = 0;
  24. $("#preview").html('<div class="upload_loading"></div>');
  25. var funAppendImage = function () {
  26. file = files[i];
  27. if (file) {
  28. var reader = new FileReader();
  29. reader.onload = function (e) {
  30. html = '<div id="uploadList_' + i + '" class="upload_append_list"><p><strong>' + file.name + '</strong><br /><img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" /></p><span id="uploadProgress_' + i + '" class="upload_progress"></span></div>';
  31. i += 1;
  32. funAppendImage()
  33. };
  34. reader.readAsDataURL(file);
  35. document.querySelector('.upload_preview').style.background = '#ccc'
  36. } else {
  37. $("#preview").html(html);
  38. if (html) {
  39. $("#fileSubmit").show();
  40. document.getElementById("i_want_share").className = "mui-btn mui-btn-red"
  41. } else {
  42. $("#fileSubmit").hide()
  43. }
  44. }
  45. };
  46. funAppendImage()
  47. },
  48. onDelete: function (file) {
  49. $("#uploadList_" + file.index).fadeOut()
  50. },
  51. onDragOver: function () {
  52. $(this).addClass("upload_drag_hover")
  53. },
  54. onDragLeave: function () {
  55. $(this).removeClass("upload_drag_hover")
  56. },
  57. onProgress: function (file, loaded, total) {
  58. var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
  59. eleProgress.show().html(percent)
  60. },
  61. onSuccess: function (file, response) {
  62. $("#uploadInf").append("<p>上传成功,图片地址是:" + response + "</p>")
  63. },
  64. onFailure: function (file) {
  65. $("#uploadInf").append("<p>图片" + file.name + "上传失败!</p>");
  66. $("#uploadImage_" + file.index).css("opacity", 0.2)
  67. },
  68. onComplete: function () {
  69. $("#fileSubmit").hide();
  70. $("#fileImage").val("");
  71. $("#uploadInf").append("<p>当前图片全部上传完毕。</p>")
  72. }
  73. };
  74. ZXXFILE = $.extend(ZXXFILE, params);
  75. ZXXFILE.init();
  76. var mask = mui.createMask(function () {
  77. });
  78. mui('body').on('tap', '.mui-btn-red', function () {
  79. mask.show();
  80. });