jquery 无表单文件上传

fwzugrvs  于 2023-01-20  发布在  jQuery
关注(0)|答案(7)|浏览(168)

不使用任何表单,我可以使用jQuery的POST方法从<input type="file">发送一个文件到'upload.php'吗?input标签不在任何表单标签中,它是独立的。所以我不想使用jQuery插件,如'ajaxForm'或'ajaxSubmit'。

r7xajy2e

r7xajy2e1#

您可以使用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,方法和参数数据)。

dy1byipe

dy1byipe2#

这里的所有答案仍然使用FormData API,就像"multipart/form-data"上传没有表单一样,您也可以使用xmlHttpRequest将文件直接作为POST请求主体内的内容上传,如下所示:

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类型和文件名)。
我也发布了类似的答案here

更新(2023年1月):

您还可以使用the Fetch API将文件直接作为二进制内容上传(正如评论中所建议的)。

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

const promise = fetch(target, { 
  method: 'POST', 
  body: file, 
  headers: {
    'Content-Type': mimeType,
    'Content-Disposition', `attachment; filename="${fileName}"`,
  },
},
});

promise.then(
  (response) => { /*...do something with response*/ },
  (error) => { /*...handle error*/ },
);

另请参阅此处的相关问题:https://stackoverflow.com/a/48568899/1697459

sxpgvts3

sxpgvts33#

步骤1:创建HTML页面,放置HTML代码.
步骤2:在HTML代码页底部(页脚)创建Javascript:并将Jquery代码放入Script标记中。
步骤3:创建PHP文件和php代码复制过去。在$.ajax中的Jquery代码之后代码url应用你的php文件名上的哪一个。

    • 苏丹**
//$(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 
    }
  });
});
    • 超文本标记语言**
<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />
    • 菲律宾**
print_r($_FILES);
print_r($_POST);
6ojccjat

6ojccjat4#

基于this tutorial,这里有一个非常基本的方法来实现这一点:

$('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){
            ...
        }
        ...
    }); 
});

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

c0vxltue

c0vxltue5#

试试这个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');

  }
});
mlmc2os5

mlmc2os56#

非jquery(React)版本:

联属萨摩亚

function fileInputUpload(e){

    let formData = new FormData();
    formData.append(e.target.name, e.target.files[0]);

    let response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });

    let result = await response.json();

    console.log(result.message);
}

HTML/JSX格式:

<input type='file' name='fileInput' onChange={(e) => this.fileInput(e)} />

您可能不想使用onChange,但是可以将上载部分附加到任何其他函数。

mctunoxg

mctunoxg7#

抱歉,我是那个家伙,但AngularJS提供了一个简单而优雅的解决方案。
下面是我使用的代码:

ngApp.controller('ngController', ['$upload',
function($upload) {

  $scope.Upload = function($files, index) {
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        file: file,
        url: '/File/Upload',
        data: {
          id: 1 //some data you want to send along with the file,
          name: 'ABC' //some data you want to send along with the file,
        },

      }).progress(function(evt) {

      }).success(function(data, status, headers, config) {
          alert('Upload done');
        }
      })
    .error(function(message) {
      alert('Upload failed');
    });
  }
};
}]);
.Hidden {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-controller="ngController">
  <input type="button" value="Browse" onclick="$(this).next().click();" />
  <input type="file" ng-file-select="Upload($files, 1)" class="Hidden" />
</div>

在服务器端,我有一个MVC控制器,它的操作是保存在Request.files集合中找到的上传文件,并返回一个JsonResult。
如果你使用AngularJS试试这个,如果你不...对不起伙计:-)

相关问题