[操作疑難] filereader javascript post

carlkyo

新年快樂
請問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

https://makitweb.com/how-to-uplo ... ng-ajax-and-jquery/

carlkyo

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

   我想做到可以不停選文件圖片,最後先禁submit
好像上面張圖咁,選左之後唔啱可以刪除
thanks

CVSDF

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

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

many thanks
我再試試