Question

这里的服务器端开发者是一个JS新手（1周大）。这个问题与浏览器兼容性问题有关（特别是移动浏览器）。

我尝试使用纯JS / Ajax通过网络表单处理图片上传。具体来说，我一度使用append上的FormData()方法filename。{

以下是代码：

function overwrite_default_submit(e) {
  // block the default behavior
  e.preventDefault();
  // create and populate the form with data
  var form_data = new FormData();
  form_data.append("image", img_to_send, img_name);

  // send the form via AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', e.target.action);
  xhr.send(form_data);
}

根据https://developer.mozilla.org/en-US/docs/Web/API/FormData/append，移动设备中append的浏览器兼容性并不普遍。引用的两个问题是：

Android 4.0中的XHR使用blob为FormData发送空内容。

和

在Gecko 7.0之前（Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4），如果您将Blob指定为要附加到对象的数据，则文件名在＆＃34; Content-Disposition＆＃34;中报告HTTP标头是一个空字符串;这导致某些服务器报告错误。从Gecko 7.0开始，文件名＆＃34; blob＆＃34;发送。

我的问题是：

1）我可以用什么方法来解决这些具体情况？

2）我可以采取哪些检查措施以优雅地退回（例如，对于我已经实施的非JS解决方案），以防无法通过？

很想看到专家如何做到这一点的说明性例子。

如果有必要，请在此处填写完整的代码：

// converting image data uri to a blob object
function dataURItoBlob(dataURI,mime_type) {
  var byteString = atob(dataURI.split(',')[1]);//supported
  var ab = new ArrayBuffer(byteString.length);//supported
  var ia = new Uint8Array(ab);//supported
  for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); }//supported
  return new Blob([ab], { type: mime_type });
}

以下内容如上所述：

var canvas = document.createElement('canvas');
canvas.width = img_width;
canvas.height = img_height;
var ctx = canvas.getContext("2d");
ctx.drawImage(source_img, 0, 0, img_width, img_height);
return dataURItoBlob(canvas.toDataURL(mime_type,quality/100),mime_type);

最终，返回的blob被附加到FormData()对象并通过Ajax发送：

function overwrite_default_submit(e) {
  // block the default behavior
  e.preventDefault();
  // create and populate the form with data
  var form_data = new FormData();
  form_data.append("image", img_blob, img_name);

  // send the form via AJAX
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
  xhr.open('POST', e.target.action);
  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  xhr.send(form_data);
}

FormData（）追加方法（浏览器兼容性问题）

0 个答案: