양식 없이 파일 업로드

양식 없이 파일 업로드

양식을 사용하지 않고 다음에서 파일/파일을 보낼 수 있습니까?<input type="file">…까지jQuery를 사용하는 POST 메서드를 사용하는 php'입니다.입력 태그가 양식 태그 안에 없습니다.그것은 개별적으로 서 있습니다.그래서 'axForm'이나 'axSubmit' 같은 jQuery 플러그인을 사용하고 싶지 않습니다.

양식 데이터를 사용하여 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
});

요청 설정(URL, 메서드 및 매개 변수 데이터 등)을 알고 있는 한 Ajax 요청을 할 때 양식을 사용할 필요가 없습니다.

여기에 있는 모든 답변은 여전히 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-Type그리고.Content-Disposition헤더는 보내는 내용(파일 형식 및 파일 이름)을 설명하는 데 사용됩니다.

저는 여기에도 비슷한 답변을 올렸습니다.

업데이트(2023년 1월):

설명에서 제안한 대로 를 사용하여 이진 콘텐츠로 파일을 직접 업로드할 수도 있습니다.

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

1단계: HTML 코드를 배치할 HTML 페이지를 만듭니다.

2단계: HTML 코드 페이지 하단(footer)Javascript:를 만들고 Script 태그에 Jquery Code를 넣습니다.

3단계: PHP 파일 및 PHP 코드 복사 과거. 에서 Jquery 코드 이후.$.ajax코드 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 
    }
  });
});

HTML

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

php

print_r($_FILES);
print_r($_POST);

[이 튜토리얼][1]을 기반으로 한 매우 기본적인 방법은 다음과 같습니다.

$('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 a file in the same way as if it was submitted in a form:
        // $_FILES['input_file_name']
        success: function(jsonData){
            ...
        }
        ...
    }); 
});

올바른 오류 처리를 추가하는 것을 잊지 마십시오 [1]: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

이 퍼글린을 사용해 보세요. 간단한 업로드, 양식 필요 없음.

HTML:

<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');

  }
});

쿼리가 아닌 버전(응답):

JS:

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)} />

Change에서 사용하지 않을 수도 있지만 업로드 부분을 다른 기능에 첨부할 수 있습니다.

그런 남자라서 미안하지만 앵귤러.JS는 간단하고 우아한 솔루션을 제공합니다.

사용하는 코드는 다음과 같습니다.

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 컨트롤러가 있습니다.파일 수집 및 JsonResult 반환.

각도를 사용하는 경우JS가 해봐요, 안 그러면...미안해 친구 :-)

언급URL : https://stackoverflow.com/questions/19617996/file-upload-without-form