无格式文件上传

IT技术 javascript jquery html
2021-01-17 05:37:27

在不使用任何形式的情况下,我可以<input type="file">使用 jQuery 使用 POST 方法将文件/文件从“upload.php”发送到“upload.php”。输入标签不在任何表单标签内。它独立存在。所以我不想使用像“ajaxForm”或“ajaxSubmit”这样的 jQuery 插件。

6个回答

您可以使用FormData通过 POST 请求提交数据。这是一个简单的例子:

var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);

$.ajax({
  url: 'upload.php',
  type: 'POST',
  processData: false, // important
  contentType: false, // important
  dataType : 'json',
  data: myFormData
});

您不必使用表单来发出 ajax 请求,只要您知道您的请求设置(如 url、方法和参数数据)。

这里面的图片输入是什么?
2021-03-23 05:37:27
恕我直言,这是最好的解决方案,但是另一种选择是在内部使用 <iframe,您可以定期回发
2021-03-26 05:37:27
@developersaumyapictureinput是文件输入 DOM 元素。
2021-03-27 05:37:27
兄弟,你救了我的命!!:D 谢谢@monshi 和@jsmiff。(SOF 不允许多个用户在同一评论中)。
2021-04-02 05:37:27
不要忘记添加processData: falsecontentType: false到设置对象,否则您将收到 Uncaught TypeError: Illegal invocation
2021-04-08 05:37:27

这里的所有答案仍然使用FormData API这就像"multipart/form-data"没有表格上传。您还可以使用如下方式将文件作为内容直接上传到POST请求正文中xmlHttpRequest

var xmlHttpRequest = new XMLHttpRequest();

var file = ...file handle...
var fileName = ...file name...
var target = ...target...
var mimeType = ...mime type...

xmlHttpRequest.open('POST', target, true);
xmlHttpRequest.setRequestHeader('Content-Type', mimeType);
xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
xmlHttpRequest.send(file);

Content-TypeContent-Disposition标题用于解释我们发送的内容(mime 类型和文件名)。

我也在这里发布了类似的答案

@Harry,我相信您知道这里的大多数答案使用的 AJAX 也依赖于 xmlHttpRequest。如果您使用 FormData() 而不是在 HTML 中编写实际表单,您就没有阻塞。干杯
2021-03-16 05:37:27
@VitalyZdanevich 不确定你的意思是什么?
2021-03-18 05:37:27
怎么样fetch()
2021-03-25 05:37:27
这是一个很好的答案。它完全避免了表单数据的使用。我可以在 xmlHttpRequest 的使用中添加更多内容。XMLHttpRequest 允许执行异步操作,不会阻塞客户端(UI 页面)。使用 HTML 表单时,客户端(UI 页面)在执行操作时被阻止。
2021-04-10 05:37:27

基于本教程,这里有一个非常基本的方法来做到这一点:

$('your_trigger_element_selector').on('click', function(){    
    var data = new FormData();
    data.append('input_file_name', $('your_file_input_selector').prop('files')[0]);
    // append other variables to data if you want: data.append('field_name_x', field_value_x);

    $.ajax({
        type: 'POST',               
        processData: false, // important
        contentType: false, // important
        data: data,
        url: your_ajax_path,
        dataType : 'json',  
        // in PHP you can call and process file in the same way as if it was submitted from a form:
        // $_FILES['input_file_name']
        success: function(jsonData){
            ...
        }
        ...
    }); 
});

不要忘记添加适当的错误处理

第 1 步:创建 HTML 页面以放置 HTML 代码。

步骤 2:在 HTML 代码页底部(页脚)创建 Javascript:并将 Jquery 代码放入 Script 标签中。

第 3 步:创建 PHP 文件并将 php 代码复制过去。$.ajax代码 url 中的Jquery 代码之后应用您的 php 文件名中的哪一个。

JS

//$(document).on("change", "#avatar", function() {   // If you want to upload without a submit button 
$(document).on("click", "#upload", function() {
  var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field
  var form_data = new FormData(); // Creating object of FormData class
  form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data
  form_data.append("user_id", 123) // Adding extra parameters to form_data
  $.ajax({
    url: "/upload_avatar", // Upload Script
    dataType: 'script',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data, // Setting the data attribute of ajax with file_data
    type: 'post',
    success: function(data) {
      // Do something after Ajax completes 
    }
  });
});

HTML

<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />

php

print_r($_FILES);
print_r($_POST);
我将如何在 java 代码中引用这些表单变量
2021-03-15 05:37:27
tmp在整个表单提交之前,您可以将文件上传到目录吗?(说这是一个多形式)?
2021-03-16 05:37:27
让我的一天:) 谢谢
2021-03-26 05:37:27
缺少,type: 'post'
2021-04-03 05:37:27
请为您的代码添加一些注释/描述
2021-04-06 05:37:27

试试这个 puglin simpleUpload,不需要表格

网址:

<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>

Javascript:

$('#simpleUpload').simpleUpload({
  url: 'upload.php',
  trigger: '#enviar',
  success: function(data){
    alert('Envio com sucesso');

  }
});