Django:如何使用ajax上传文件

Question

我正在使用 django 1.5、python 2.7 和 jquery 1.9。我有一个表单，其中包含两个字段，即标题和文档。当我按下提交时，我希望用户选择的文档出现在请求中。文件如 View 中所示。

当我提交常规表单(没有ajax)时，这工作正常，但是使用ajax我没有在我的请求中获得文件字段。关于如何使用 ajax 上传文件的任何建议。

HTML:

<form enctype="multipart/form-data" action="{% url 'upload_document' %}" method="post" id="uploadForm">
    {% csrf_token %}
        <ul>
          <li>
            <div>Title</div>
            <input id="title" type="text" maxlength="200"/>
            <div class="error"></div>          
          </li>

          <li>
            <div>Upload File</div>
            <input id="document" type="file" size="15" />
            <div class="error"></div>
          </li>
        </ul>

      <input type="submit" value="submit"/></p>
</form>   

FORMS.PY:

class UploadForm( forms.Form ):
    document = forms.FileField()
    title = forms.CharField(max_length = 200)

    def clean(self):
        cleaned_data = super(UploadForm, self).clean()
        return cleaned_data

    def save(self, *args, **kwargs):
        title = self.cleaned_data['title']
        doc = self.cleaned_data['document']

        document = Document(title = title, document = doc)
        document.save()
        return document

脚本:

<script type="text/javascript">
    $("#uploadForm").submit(function(event){
      event.preventDefault();
      $.ajax({
        url : "{% url 'upload_document' %}",
        type: "POST",
        data : {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                title: document.getElementById('title').value,
                //document: document: document.getElementById('document'),
        },
        dataType : "json",
        success: function( response ){
           if(response == "True"){
            // success
           }
           else {
            //append errors
           }
        }
      });
  }); 
</script>

VIEWs.PY

def upload_document(request): 
    print request.POST
    print request.FILES
    if request.is_ajax():
        if request.method == 'POST':
            form = UploadForm(request.POST, request.FILES, user = request.user)

            if form.is_valid():
                form.save()
                return HttpResponse(simplejson.dumps('True'), mimetype = 'application/json' )
            else:
                errors = form.errors
                return HttpResponse(simplejson.dumps(errors), mimetype = 'application/json' )

Answer 1

这个问题的答案并不那么简单。首先，如果您打算支持旧浏览器，那么确实会变得很糟糕。您必须处理隐藏的 iframe 和一些 JavaScript 技巧。我建议使用一些众所周知的脚本，例如 jQuery-File-Upload .

但是世界在不断发展，包括 HTML5 在内的新技术不断涌现。大多数现代浏览器(IE10+、FireFox3.6+、Chrome13+，请参阅:http://caniuse.com/fileapi)中都提供了一个新的文件 API，可用于此目的。首先您需要一些 HTML:

<input type="file" id="file-select" />

然后您可以绑定(bind)到(例如)change 事件:

$('#file-select').change( handleFileSelect );

最后是处理程序本身:

var data = {};

function createReaderHandler(name) {
  return function(ev) {
    data[name] = ev.target.result;
  };
}

function handleFileSelect(ev) {
  var files = ev.target.files; // FileList object

  // Loop through the FileList
  for (var i = 0; i < files.length; i++) {
    var file = files[i],
        name = file.name || file.fileName,
        reader = new FileReader();

    reader.onload = createReaderHandler(name);
    reader.readAsText(file);
  }
}

一旦数据加载到 JavaScript 内存中(请注意，该操作是异步)，您就可以像任何其他数据一样通过 AJAX 发送它。还有更多选项:根据您的文件，您可以使用 .readAsBinaryString 等将其读取为二进制数据。谷歌是你的 friend 。 :)

此外，我认为已经有一些很好的脚本可以使用旧方法来上传文件。这个可能很有趣(还没尝试过):

http://www.plupload.com/