如何将上传的图像附加到表单然后发布到服务器答案

【问题标题】：How can I append uploaded Images to form then post to server如何将上传的图像附加到表单然后发布到服务器
【发布时间】：2014-11-12 21:56:46
【问题描述】：

我正在尝试在我的网站上上传图片，然后将它们发回我的服务器。

要上传图片，我使用的是此处的插件： http://jasny.github.io/bootstrap/javascript/#fileinput

所以我包含了在这里找到的 javascript 和 css 文件：

cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css

cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js

在我的 html 页面上，我包含以下内容：

  <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 100px; height: 100px;">
        <img data-src="holder.js/100%x100%" alt="...">
      </div>
      <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
      <div>
          <span style="background-color: #68C3A3" class="btn btn-success btn-file">
              <span class="fileinput-new">Select Artist Image</span><span style="background-color: #68C3A3" class="fileinput-exists">Change</span>
              <input id="inPutArtistImage" type="file"  multiple>
          </span>
        <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
      </div>
    </div>

选择和删除图像效果很好。

现在我尝试使用一个单独的按钮将选定的文件附加到表单数据。

$scope.UpdateChannelImages = function() {
  var formData, thumbnail;
  formData = new FormData();
  if ($('#inPutArtistImage')[0].files && $('#inPutArtistImage')[0].files.length > 0) {
    thumbnail = $('#inPutArtistImage')[0].files[0];
    formData.append('inPutArtistImage', thumbnail, 'Artist' + thumbnail.name);

但是我根本无法将文件附加到表单数据中：

我收到此错误：无法读取未定义的属性“文件”

这是引发错误的行： if ($('#inPutArtistImage')[0].files && $('#inPutArtistImage')[0].files.length > 0) {

我需要帮助将上传的图片附加到表单数据

【问题讨论】：

由于 $('#inPutArtistImage')[0] 即将出现未定义，让我相信您在输入元素甚至在 DOM 中之前调用 UpdateChannelImages()。是这样吗？
没有。我首先选择图像，然后通过单击单独的按钮调用上传
UpdateChannelImages() 方法是从 iframe 中调用的吗？如果是这样，它将不会引用 #inPutArtistImage 元素。
或者，引导插件是否剥离/更改您尝试引用的文件输入的 ID？
也许我是一个初学者 java-script 程序员。

标签： javascript

【解决方案1】：

为了解决这个错误，我在输入元素中添加了 name 属性：

感谢这篇文章： Jasny Bootstrap File Upload Control

【讨论】：