Board logo

標題: [操作疑難] filereader javascript post [打印本頁]
作者: carlkyo    時間: 2019-1-4 14:52     標題: filereader javascript post

本帖最後由 carlkyo 於 2019-1-4 14:57 編輯

新年快樂
請問ching
我錯左邊啊
我post唔到select左既file
many thanks
  1.    $(document).ready(function () {
  2.         var fileList = [];
  3.         if (window.File && window.FileList && window.FileReader) {
  4.     $("#file").on("change", function(e) {
  5.       var files = e.target.files,
  6.         filesLength = files.length;               
  7.       for (var i = 0; i < filesLength; i++) {
  8.         var f = files[i]
  9.         var fileReader = new FileReader();
  10.         fileReader.onload = (function(e) {
  11.           var file = e.target;
  12.           $("<span class="pip">" +
  13.             "<img class="imageThumb" src="" + e.target.result + "" title="" + f.name + ""/>" +
  14.                         "<br/>"+f.name +
  15.             "<br/><span class="remove">刪除</span>" +
  16.             "</span>").insertAfter("#file");
  17.           $(".remove").click(function(){
  18.             $(this).parent(".pip").remove();
  19.           });         
  20.         });
  21.         fileReader.readAsDataURL(f);
  22.                 fileList.push(f);
  23.       }
  24.           console.log(fileList);
  25.     });
  26.   } else {
  27.     alert("Your browser doesn't support to File API")
  28.   }
  29. $('#form').on('submit', function (e) {
  30.     e.preventDefault();
  31.     $.ajax({
  32.         url: 'post.php',
  33.         type: 'POST',
  34.         data: {name: fileList,request: 2},               
  35.         contentType: false,
  36.         cache: false,
  37.         processData: false,
  38.         //dataType: 'json',
  39.         success: function (response) {
  40.                         $('.jumbotron').html(response);
  41.         },
  42.     });   
  43. });
  44. });
複製代碼
作者: CVSDF    時間: 2019-1-5 01:17

https://makitweb.com/how-to-uplo ... ng-ajax-and-jquery/
作者: carlkyo    時間: 2019-1-5 19:43

CVSDF 發表於 2019-1-5 01:17



   我想做到可以不停選文件圖片,最後先禁submit
好像上面張圖咁,選左之後唔啱可以刪除
thanks
作者: CVSDF    時間: 2019-1-6 02:56

Try use formdata object in ur ajax, seems works:
  1.         var fd = new FormData();
  2.         for(var x=0; x<$('#file')[0].files.length; x++){
  3.                 fd.append('file' + x , $('#file')[0].files[x] );
  4.         }
  5.        
  6.     $.ajax({
  7.         url: './post.php',
  8.         type: 'POST',
  9.         data : fd,
  10.         contentType: false,
  11.         cache: false,
  12.         processData: false,
  13.         success: function (response) {
  14.                         console.log(response);
  15.                         $('.jumbotron').html(response);
  16.         },
  17.     });  
複製代碼
作者: CVSDF    時間: 2019-1-6 04:25

btw fileList好似係readonly的, 恐怕用code更改不了? :/
https://w3c.github.io/FileAPI/#dfn-filelist
Note: The HTMLInputElement interface has a readonly attribute of type FileList, which is what is being accessed in the above example. Other interfaces with a readonly attribute of type FileList include the DataTransfer interface.
作者: carlkyo    時間: 2019-1-6 11:25

many thanks
我再試試




歡迎光臨 電腦領域 HKEPC Hardware (https://h2.hkepc.com/forum/) Powered by Discuz! 7.2