Question

所以我想上傳沒有任何外部插件的文件，但我遇到了一些錯誤。

   <form method="" action="" name='upload_form' id='upload_form' > 
        {% csrf_token %} 
        <input type='file' name='file' id='file' /> 
        <input type='button' value='Upload' id='upload'/> 
       </form> 

       <script type='text/javascript'> 
       $(document).ready(function() { 
        var csrf_token = $('input[name="csrfmiddlewaretoken"]').val(); 
        $('#upload').click(function() { 
         $.ajax({ 
          csrfmiddlewaretoken: csrf_token, 
          type: 'POST', 
          url : 'upload', 
          enctype: "multipart/form-data", 
          data : { 
           'file': $('#file').val() 
          }, 
          success: function(data) { 
           console.log(data) 
          } 
         }) 
        }) 
       }) 
       </script> 

我的服務器：

class ImageUploadView(LoginRequiredMixin, JSONResponseMixin, AjaxResponseMixin, CurrentUserIdMixin, View): 

    @method_decorator(csrf_protect) 
    def dispatch(self, *args, **kwargs): 
     return super(ImageUploadView, self).dispatch(*args, **kwargs) 

    def post_ajax(self, request, username): 
       print request.POST.get('file', None) 
       print request.FILES 

     # id = request.POST['id'] 
     # path = 'pictures/' 
     # f = request.FILES['picture'] 
     # destination = open(path, 'wb+') 
     # for chunk in f.chunks(): 
     # destination.write(chunk) 
     # destination.close() 
return HttpResponse("image uploaded") 

我得到<MultiValueDict: {}>爲request.FILES

如何正確獲取上傳的文件，現在我的代碼？

Answer 1

我跟着這個教程http://www.script-tutorials.com/pure-html5-file-upload/和PHP的一部分我替換：

class UploadImageView(LoginRequiredMixin, CurrentUserIdMixin, View): 

    @method_decorator(csrf_protect) 
    def dispatch(self, *args, **kwargs): 
     return super(UploadImageView, self).dispatch(*args, **kwargs) 

    def post(self, request, username): 
     path = 'myproject/media/pictures/guitar.jpg' 
     f = request.FILES['image_file'] 
     destination = open(path, 'wb+') 
     for chunk in f.chunks(): 
      destination.write(chunk) 
      destination.close() 

      return HttpResponse("image uploaded") 

也改變了這一行

<form id="upload_form" enctype="multipart/form-data" method="post" action="."> 
           {% csrf_token %} 

Answer 2

下面是我用它來上傳使用JavaScript文件，希望這有助於！只需傳遞$（'＃file'）作爲參數。

function upload(field, upload_url) { 
    if (field.files.length == 0) { 
     return; 
    } 
    file = field.files[0]; 
    var formdata = new FormData(); 
    formdata.append('file_upload', file); 
    $.ajax({ 
     url: upload_url, 
     type: 'POST', 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: console.log('success!') 
    }); 
} 

[編輯]

這是我在服務器端（簡體）做：

def save_file(dest_path, f, filename): 
    original_name, file_extension = os.path.splitext(f.name) 
    filename = filename + '-' + datetime.datetime.now().strftime('%Y-%m-%d-%H-%M-%S') + file_extension 
    url = '/' + dest_path + '/' + filename 
    path = django_settings.MEDIA_ROOT + url 
    destination = open(path, 'wb+') 
    for chunk in f.chunks(): 
     destination.write(chunk) 
    destination.close() 
    return path 

class FileUploadView(View): 
    def post(self, request, *args, **kwargs): 
     if request.FILES and request.FILES.get('file_upload'): 
      path = save_file(UPLOAD_TO, 
          request.FILES.get('file_upload'), 
          FILENAME) 
     return self.render_to_response({})