上传图片功能,但值未定义

时间:2019-01-14 08:17:39

标签: jquery ajax

我正在尝试使用jquery和ajax将图像上传到我的服务器。但是,上载功能仅适用于我数组的第一个ID。有什么办法可以让上传功能知道我也要为ID 2和3上传?已经尝试了很多方法,但是没有用。

附加功能

 function _getslideshow(arr){
 var i;

for (i = 0; i < arr.length; i++) {
      var t;
      t = "<div class='col-md-4'>"
      +"<img src = '"+ serverURL() + "/images/" + arr[i].imageName + "' style='width:100%'>"
      +"<div class='caption'><center> ID " + arr[i].imageID + "</center></div>"
      +"<input id='file' type='file' name='file'/>"
      +"<div style='text-align:center;'><a href='#' class='updatebtn' id='updatebtn" + arr[i].imageID + "'>Update</a></div>"
      +"</div>"
      $("#manageslideshow").append(t);
  $('#updatebtn' + arr[i].imageID).bind("click", { id: arr[i].imageID}, function (event) {
       var data = event.data;
       updateimage(data.id);
});
 }
  $('input[id="file"]').change(function(e){
   fileName = e.target.files[0].name;
  });
}

这是我的上传功能:

  function uploadimage() {

var url = serverURL() + "/uploadslide.php";
  var file_data = $('#file').prop('files')[0];
  var form_data = new FormData();
  form_data.append('file', file_data);
  alert(file_data);

$.ajax({
    url: url, // point to server-side PHP script
    dataType: 'text', // what to expect back from the PHP script
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,
    type: 'post',
    success: function (response) {
        $('#msg').html(response); // display success response from the PHP script
    },
    error: function (response) {
        $('#msg').html(response); // display error response from the PHP script
    }
});
 }

1 个答案:

答案 0 :(得分:1)

您可以使用name这样的道具:

...
var form_data = new FormData();
var files = $("input[name=file]");
files.each(function(file) {
   form_data.append('file[]',file.files[0]);
});
...