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

我正试图上传图片到我的网站上，然后把它们发回到我的服务器上

要上载我正在使用的图像，请使用此处找到的插件：

因此，我在这里包含了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>

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

我得到这个错误： 无法读取未定义的属性“文件”

以下是引发错误的行： 如果$'inPutArtistImage'[0]。文件&$'inPutArtistImage'[0]。文件.length>0{

---

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

要解决此错误，我在输入元素中添加了name属性：

感谢这篇文章：

---

自$'inPutArtistImage'[0]是未定义的，这让我相信您在输入元素进入DOM之前调用了UpdateChannelImages。是这样吗？否。我首先选择图像，然后通过单击单独的按钮调用上载。UpdateChannelImages方法是从iframe内调用的？如果是，它将不会引用InputArtimages或者，引导插件是否会剥离/更改您试图引用的文件输入的id？可能会，我是一个java脚本编程新手。

$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);