Ответ 1

Вы можете преобразовать строку base64 в blob и затем добавить его в formData перед отправкой его с помощью запроса ajax:

$("#form").submit(function(e) {
  e.preventDefault();
  formData = new FormData($(this)[0]);
  var blob = dataURLtoBlob("base64 string");
  formData.append("yourfile", blob);
  $.ajax({
    url: "whatever.php",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
      alert("Form has been submitted with file");
    }
});

dataURLtoBlob - это функция, которая преобразует строку base64 в источник двоичного файла (blob): Blob из DataURL?

Ответ 2

Обновление: добавлен JsFiddle, чтобы продемонстрировать, что я пробовал.

@seahorsepip Отвечать, минимально скорректированный, чтобы подставить success для done, который не определен $.ajax(), и удаляя трейлинг ; после done:function(){}, который регистрирует синтаксическую ошибку, должен возвращать ожидаемый результат. Где convertedvalue при соединении jsfiddle в обновленном Вопросе также настроен на действительный data URI. То есть после преобразования строки в base64 используйте схему URL "data" для преобразования строки base64 в действительный data URI; например.

"data:text/plain;base64," + convertedvalue

Примечание. Объект File, созданный в FormData, запрашивается с помощью GET и возвращается в success в stacksnippets и jsfiddle для демонстрации файла в FormData POST ed $.ajax()

var convertedvalue = btoa(str); // where `str` is string
$("#form").submit(function(e) {
  e.preventDefault();
  formData = new FormData($(this)[0]);
  // pass valid `data URI` to `dataURItoBlob`
  // note `base64` extension
  var blob = dataURItoBlob("data:text/plain;base64," + convertedvalue);
  formData.append("yourfile", blob);
  $.ajax({
    url: "/path/to/server",
    type: "POST",
    data: formData,
    contentType: false,
    cache: true,
    processData: false,
    // substitute `success` for `done`
    success: function(data) {
      //alert("Form has been submitted with file");
    } // remove trailing `;`
  });
})

var str = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit pharetra ante, quis tristique elit tempor at. Mauris nec nisi porttitor, sodales nunc facilisis, tempor ligula. Aenean luctus purus id orci commodo, eu ornare erat molestie. Proin viverra semper est, sit amet hendrerit mi. Phasellus sodales auctor ipsum eu fermentum. Quisque ut convallis turpis. Suspendisse et varius lorem. Quisque ipsum metus, venenatis quis aliquam et, lobortis nec purus. Aenean consectetur, tellus in gravida tempor, dui lacus placerat dui, quis dictum libero sapien at diam. Donec eleifend, turpis ac vulputate vulputate, nulla enim vestibulum magna, nec finibus ex urna sed quam. Curabitur vitae felis mi. Suspendisse potenti.

Quisque scelerisque mattis venenatis. Phasellus in varius lectus. Ut ut lorem eu augue convallis vulputate. Ut at tortor leo. Etiam tristique, quam et ultrices commodo, risus mauris mollis nisi, quis condimentum sapien tortor et dolor. Pellentesque sollicitudin velit ut sapien tristique, in mattis est facilisis. Pellentesque et leo massa. Sed pretium faucibus purus ac sodales. Sed varius eros felis, vel posuere metus lobortis id. Maecenas eget cursus ligula. In nec luctus orci. Nunc sed massa elit. Pellentesque iaculis tortor sit amet tellus ultrices, nec tristique lorem semper.

Donec aliquet ipsum ipsum, in consequat nisl euismod nec. Aenean aliquam nisl nec elit convallis pulvinar. Suspendisse ac malesuada ex. Fusce laoreet metus at nulla suscipit, non facilisis dui scelerisque. Maecenas blandit augue et lorem venenatis consequat. In porttitor eros ac elit placerat sodales. Suspendisse facilisis lorem vestibulum ante commodo dignissim. Mauris dignissim egestas massa, sit amet hendrerit orci molestie id. Suspendisse vel enim sit amet massa eleifend accumsan. Curabitur eleifend velit non nisi egestas ornare. Ut congue, eros a condimentum faucibus, risus sapien cursus elit, tempor condimentum nisi nisi vitae leo. Sed quis blandit tellus, in aliquet purus. Pellentesque eget leo lobortis, consectetur nisi non, facilisis lectus. Morbi tortor augue, posuere vel ultrices in, vestibulum vel nibh. Morbi accumsan tellus congue commodo tincidunt.

Curabitur vitae fermentum eros. Sed ex dolor, suscipit in ornare in, sollicitudin ac mi. Phasellus ornare ipsum vel elit mollis convallis. Nunc nec porttitor tellus. Nullam volutpat leo sed dapibus vestibulum. Ut aliquet accumsan nulla, commodo pharetra urna auctor in. In ligula lectus, molestie a libero a, sollicitudin rutrum tellus.

Integer vitae turpis id ligula eleifend laoreet. Morbi molestie libero non interdum pulvinar. Nulla facilisi. Nulla a facilisis velit. Etiam metus felis, fermentum eget massa eu, posuere vestibulum mauris. Donec placerat faucibus sapien, vitae dapibus est dapibus ac. Nam quis elementum eros, a eleifend erat. Sed interdum nisi at rhoncus rutrum. Phasellus vitae arcu a tellus tincidunt mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit pharetra ante, quis tristique elit tempor at. Mauris nec nisi porttitor, sodales nunc facilisis, tempor ligula. Aenean luctus purus id orci commodo, eu ornare erat molestie. Proin viverra semper est, sit amet hendrerit mi. Phasellus sodales auctor ipsum eu fermentum. Quisque ut convallis turpis. Suspendisse et varius lorem. Quisque ipsum metus, venenatis quis aliquam et, lobortis nec purus. Aenean consectetur, tellus in gravida tempor, dui lacus placerat dui, quis dictum libero sapien at diam. Donec eleifend, turpis ac vulputate vulputate, nulla enim vestibulum magna, nec finibus ex urna sed quam. Curabitur vitae felis mi. Suspendisse potenti.

Quisque scelerisque mattis venenatis. Phasellus in varius lectus. Ut ut lorem eu augue convallis vulputate. Ut at tortor leo. Etiam tristique, quam et ultrices commodo, risus mauris mollis nisi, quis condimentum sapien tortor et dolor. Pellentesque sollicitudin velit ut sapien tristique, in mattis est facilisis. Pellentesque et leo massa. Sed pretium faucibus purus ac sodales. Sed varius eros felis, vel posuere metus lobortis id. Maecenas eget cursus ligula. In nec luctus orci. Nunc sed massa elit. Pellentesque iaculis tortor sit amet tellus ultrices, nec tristique lorem semper.

Donec aliquet ipsum ipsum, in consequat nisl euismod nec. Aenean aliquam nisl nec elit convallis pulvinar. Suspendisse ac malesuada ex. Fusce laoreet metus at nulla suscipit, non facilisis dui scelerisque. Maecenas blandit augue et lorem venenatis consequat. In porttitor eros ac elit placerat sodales. Suspendisse facilisis lorem vestibulum ante commodo dignissim. Mauris dignissim egestas massa, sit amet hendrerit orci molestie id. Suspendisse vel enim sit amet massa eleifend accumsan. Curabitur eleifend velit non nisi egestas ornare. Ut congue, eros a condimentum faucibus, risus sapien cursus elit, tempor condimentum nisi nisi vitae leo. Sed quis blandit tellus, in aliquet purus. Pellentesque eget leo lobortis, consectetur nisi non, facilisis lectus. Morbi tortor augue, posuere vel ultrices in, vestibulum vel nibh. Morbi accumsan tellus congue commodo tincidunt.

Curabitur vitae fermentum eros. Sed ex dolor, suscipit in ornare in, sollicitudin ac mi. Phasellus ornare ipsum vel elit mollis convallis. Nunc nec porttitor tellus. Nullam volutpat leo sed dapibus vestibulum. Ut aliquet accumsan nulla, commodo pharetra urna auctor in. In ligula lectus, molestie a libero a, sollicitudin rutrum tellus.

Integer vitae turpis id ligula eleifend laoreet. Morbi molestie libero non interdum pulvinar. Nulla facilisi. Nulla a facilisis velit. Etiam metus felis, fermentum eget massa eu, posuere vestibulum mauris. Donec placerat faucibus sapien, vitae dapibus est dapibus ac. Nam quis elementum eros, a eleifend erat. Sed interdum nisi at rhoncus rutrum. Phasellus vitae arcu a tellus tincidunt mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit pharetra ante, quis tristique elit tempor at. Mauris nec nisi porttitor, sodales nunc facilisis, tempor ligula. Aenean luctus purus id orci commodo, eu ornare erat molestie. Proin viverra semper est, sit amet hendrerit mi. Phasellus sodales auctor ipsum eu fermentum. Quisque ut convallis turpis. Suspendisse et varius lorem. Quisque ipsum metus, venenatis quis aliquam et, lobortis nec purus. Aenean consectetur, tellus in gravida tempor, dui lacus placerat dui, quis dictum libero sapien at diam. Donec eleifend, turpis ac vulputate vulputate, nulla enim vestibulum magna, nec finibus ex urna sed quam. Curabitur vitae felis mi. Suspendisse potenti.

Quisque scelerisque mattis venenatis. Phasellus in varius lectus. Ut ut lorem eu augue convallis vulputate. Ut at tortor leo. Etiam tristique, quam et ultrices commodo, risus mauris mollis nisi, quis condimentum sapien tortor et dolor. Pellentesque sollicitudin velit ut sapien tristique, in mattis est facilisis. Pellentesque et leo massa. Sed pretium faucibus purus ac sodales. Sed varius eros felis, vel posuere metus lobortis id. Maecenas eget cursus ligula. In nec luctus orci. Nunc sed massa elit. Pellentesque iaculis tortor sit amet tellus ultrices, nec tristique lorem semper.

Donec aliquet ipsum ipsum, in consequat nisl euismod nec. Aenean aliquam nisl nec elit convallis pulvinar. Suspendisse ac malesuada ex. Fusce laoreet metus at nulla suscipit, non facilisis dui scelerisque. Maecenas blandit augue et lorem venenatis consequat. In porttitor eros ac elit placerat sodales. Suspendisse facilisis lorem vestibulum ante commodo dignissim. Mauris dignissim egestas massa, sit amet hendrerit orci molestie id. Suspendisse vel enim sit amet massa eleifend accumsan. Curabitur eleifend velit non nisi egestas ornare. Ut congue, eros a condimentum faucibus, risus sapien cursus elit, tempor condimentum nisi nisi vitae leo. Sed quis blandit tellus, in aliquet purus. Pellentesque eget leo lobortis, consectetur nisi non, facilisis lectus. Morbi tortor augue, posuere vel ultrices in, vestibulum vel nibh. Morbi accumsan tellus congue commodo tincidunt.

Curabitur vitae fermentum eros. Sed ex dolor, suscipit in ornare in, sollicitudin ac mi. Phasellus ornare ipsum vel elit mollis convallis. Nunc nec porttitor tellus. Nullam volutpat leo sed dapibus vestibulum. Ut aliquet accumsan nulla, commodo pharetra urna auctor in. In ligula lectus, molestie a libero a, sollicitudin rutrum tellus.

Integer vitae turpis id ligula eleifend laoreet. Morbi molestie libero non interdum pulvinar. Nulla facilisi. Nulla a facilisis velit. Etiam metus felis, fermentum eget massa eu, posuere vestibulum mauris. Donec placerat faucibus sapien, vitae dapibus est dapibus ac. Nam quis elementum eros, a eleifend erat. Sed interdum nisi at rhoncus rutrum. Phasellus vitae arcu a tellus tincidunt mattis.


Images:
1) Copy and replace the following files in the /images folder
		i.		1icon.png
		ii.		2icon.png
		iii.		3icon.png
		iv.		mobil-app.png
		v.		mobil-app-this.png
		vi.		properties-icon.svgz
		vii.		setupLogo.svgz
		viii.		web-app.png
		ix.		web-app-this.png`;
var convertedvalue = btoa(str);
console.log(convertedvalue);
$("#b64text").html(convertedvalue);
$("input[type=submit]").prop("disabled", false);
function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {
    type: mimeString
  });
  return blob;

  // Old code
  // var bb = new BlobBuilder();
  // bb.append(ab);
  // return bb.getBlob(mimeString);
}

$("#form").submit(function(e) {
  e.preventDefault();
  formData = new FormData($(this)[0]);
  // pass valid `data URI` to `dataURItoBlob`
  var blob = dataURItoBlob("data:text/plain;base64," + convertedvalue);
  formData.append("yourfile", blob);
  $.ajax({
    url: URL.createObjectURL(formData.get("yourfile")),
    type: "GET",
    // data: formData,
    contentType: false,
    cache: true,
    processData: false,
    success: function(data) {
      console.log(data);
      $("#b64text").html(data);
      //alert("Form has been submitted with file");
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="form">
  <input type="submit" disabled/>
</form>
<div id="b64text" style="  word-wrap: break-word;">

</div>

Ответ 3

Самый простой способ - выполнить запрос AJAX POST в поле формы action в теге <form>. Это то, что обычный HTML делает сам по себе в любом случае, но в нашем случае вы можете программно указать данные, в этом случае - многостраничный файл.

В качестве примера см. этот вопрос.

Ответ 4

Это просто: file type input принимает путь к файлу, который будет отправлен на form submit, а не сам файл.

UPD: Ну, в настоящее время он немного сложнее (File API), однако это просто чтобы предоставить вам доступ к данным, которые пользователь хочет вам предоставить.

Вам действительно не нужно возиться с file input, чтобы отправить файл.

Если вы принадлежите серверу, вы всегда можете принять строку base64 из обычного поля text input в качестве допустимого файла (в качестве альтернативы регулярному файловому полю).

В противном случае вы всегда можете использовать ajax (текст или blob), чтобы отправить свой form.

Ответ 5

Простая файловая загрузка без формы отправки.

HTML

<input id="inputfileUpload" onchange="fileChanged(this);" type="file" accept="*/*" />

Javacript

function fileChanged(element) {
  if (element.files[0]) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
      //file.name
      //file.size

      //Filedata: e.target.result
      //You can convert to base64
      //Angular sample:
      //$base64.encode(e.target.result);
    };
    reader.readAsBinaryString(file);
 }
}

Ответ 6

У меня есть значение Base64 для поля файла [...] Мне нужно знать, есть ли способ его установить.

Невозможно было бы иметь скрытый ввод? Вы устанавливаете base64 в это поле, поскольку максимальный размер ввода type="hidden" совпадает с type="file"

Таким образом, вы избегаете причин безопасности, препятствующих загрузке локального файла, и все же позволяете вам отправлять представление base64. Единственная проблема заключается в том, что мы не знаем, как у вас есть эта строка base64. Загружается ли она из запроса? Уже заполнено с php?...

Ответ 7

Использовать jquery:

$('#file_id_here').attr({'value':'file_path_here'})

Ответ 8

Если вы просто хотите указать, какой файл будет значением поля ввода файла, вы не сможете. Но вы можете установить поле пустым для целей проверки формы, попробуйте использовать JavaScript:

document.getElementById("your-file-form-field-id").value = "";