ファイルを非同期的にアップロードする方法
JQueryと非同期にファイルをアップロードしたいです。これは私のHTMLです：
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
そしてここに私のJqueryコード：
$(document).ready(function () {
$("#uploadbutton").click(function () {
var filename = $("#file").val();
$.ajax({
type: "POST",
url: "addFile.do",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function () {
alert("Data Uploaded: ");
}
});
});
});
ファイルがアップロードされるのではなく、ファイル名だけが取得されます。この問題を解決するために何ができますか？
現在のソリューション
ファイルをアップロードするために jQuery Form Plugin を使用しています。
HTML5 を使えば、AjaxとjQueryを使ってファイルをアップロードできます。それだけでなく、ファイルの検証（名前、サイズ、およびMIMEタイプ）を実行したり、HTML5進行タグ（またはdiv）を使用して進行イベントを処理したりできます。最近私はファイルアップローダを作らなければなりませんでしたが、 Flash Iframeやプラグインは使いたくありませんでした。そしていくつかの調査の結果、私は解決策を思いつきました。
HTML：
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
まず、必要に応じて検証をすることができます。たとえば、ファイルの.on('change')イベントでは、次のようになります。
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
$.ajax()はボタンをクリックして送信します。
$(':button').on('click', function () {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
ご覧のとおり、HTML5（および一部の研究）ファイルのアップロードが可能になるだけでなく、非常に簡単になります。 Google Chrome で試してみてください。サンプルのHTML5コンポーネントの一部はすべてのブラウザで利用できるわけではありません。
2019年更新：それは静止人口統計学の用途あなたのに依存します。
「新しい」HTML5 file APIで理解するべき重要なことは、 IE 10までサポートされていませんでした です。あなたが狙っている特定の市場が、より古いバージョンのWindowsに対する平均以上の傾向を持っているなら、あなたはそれにアクセスすることができないかもしれません。
2017年の時点で、ブラウザの約5％がIE 6、7、8、または9のいずれかです。その数はロケット弾きます。 2016年に、私は自分のマシンの60％以上でIE8を使っている会社と取引しました。
私の最初の答えから約11年後の、この編集時点での2019年です。 IE9以下は1％前後でグローバルにですが、それでも使用率の高いクラスターがあります。
これから重要なことは、どんな機能であろうと、 どのブラウザあなたのユーザが を使っているかを確認することです。そうでなければ、「うまくいく」という理由で、クライアントへの成果物として十分ではないという理由で、迅速で痛みを伴うレッスンを学ぶことになります。 caniuse は便利なツールですが、人口統計をどこから入手できるかに注意してください。彼らはあなたと一致しないかもしれません。これは企業環境よりも決して真実ではありません。
2008年からの私の答えは以下の通りです。
ただし、ファイルをアップロードするための実行可能なJS以外の方法があります。あなたは（あなたがCSSで隠す）ページ上にiframeを作成し、そのiframeに投稿するためにあなたのフォームをターゲットにすることができます。メインページは移動する必要はありません。
これは「本物の」投稿なので、完全に対話的ではありません。ステータスが必要な場合は、それを処理するためにサーバーサイドの何かが必要です。これはサーバによって大きく異なります。 ASP.NET より良いメカニズムを持っています。 PHP plainは失敗しますが、回避するには Perl またはApacheの修正を使用できます。
複数のファイルをアップロードする必要がある場合は、各ファイルを一度に1つずつ作成することをお勧めします（ファイルのアップロード制限の上限を超えるため）。最初のフォームをiframeに投稿し、上記を使用して進捗状況を監視し、終了したら、2番目のフォームをiframeに送信するというように続きます。
あるいは、Java/Flashソリューションを使用してください。彼らは彼らの投稿で何ができるかという点ではるかに柔軟です...
この目的のために Fine Uploader プラグインを使うことをお勧めします。あなたのJavaScriptコードは次のようになります。
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
注：この回答は古くなっています。XHRを使用してファイルをアップロードすることが可能になりました。
XMLHttpRequest （Ajax）を使用してファイルをアップロードすることはできません。 iframeまたはFlashを使用して効果をシミュレートできます。優れた jQueryフォームプラグイン は、効果を得るためにiframeを通してあなたのファイルを投稿します。
将来の読者のためにまとめます。
非同期ファイルのアップロード
HTML5を使用
FormData および File API がサポートされている場合（両方のHTML5機能）、ファイルjQueryで$.ajax()メソッドを使用してアップロードできます。
ファイルを FormData なしで送信することもできますが、いずれの方法でも、XMLHttpRequest（Ajax）で送信できるようにファイルを処理するためにFile APIが必要です。
$.ajax({
url: 'file/destination.html',
type: 'POST',
data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
processData: false,
contentType: false // Using FormData, no need to process data.
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
簡単で純粋なJavaScript（no jQuery）の例については、「 FormDataオブジェクトを使用したファイルの送信 」を参照してください。
後退する
HTML5がサポートされていない（File APIではない）場合、他の純粋なJavaScriptソリューション（Flashやその他のブラウザプラグインはありません）はhidden iframeテクニックです。 XMLHttpRequestオブジェクトを使用せずに非同期リクエストをエミュレートします。
ファイル入力のあるフォームのターゲットとしてiframeを設定することで構成されます。ユーザーがリクエストを送信すると、ファイルがアップロードされますが、メインページを再レンダリングする代わりに、iframe内にレスポンスが表示されます。 iframeを非表示にすると、プロセス全体がユーザーに対して透過的になり、非同期リクエストがエミュレートされます。
適切に行われれば、どのブラウザでも事実上動作するはずですが、iframeからの応答を取得する方法としていくつかの注意事項があります。
この場合、 Bifröst のようなラッパープラグインを使用することをお勧めします。これはiframe techniqueを使用しますが、 jQuery Ajax transport を提供しますto このような$.ajax()メソッドだけでファイルを送信する：
$.ajax({
url: 'file/destination.html',
type: 'POST',
// Set the transport to use (iframe means to use Bifröst)
// and the expected data type (json in this case).
dataType: 'iframe json',
fileInputs: $('input[type="file"]'), // The file inputs containing the files to send.
data: { msg: 'Some extra data you might need.'}
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
プラグイン
Bifröst はjQueryのajaxメソッドにフォールバックサポートを追加する小さなラッパーですが、前述のプラグインの多くは jQuery Form Plugin または jQuery File Upload には、HTML5からさまざまなフォールバックまでのスタック全体と、プロセスを簡単にするための便利な機能が含まれています。ニーズと要件に応じて、裸の実装またはこのプラグインのいずれかを検討することをお勧めします。
この AJAXファイルアップロードjQueryプラグイン 何らかの方法でファイルをアップロードし、応答をコールバックに渡します。
- これは特定のHTMLには依存せず、単に
<input type="file">を与えるだけです。 - サーバーが特定の方法で応答する必要はありません。
- 使用するファイルの数やページ上の場所は関係ありません。
- できるだけ少なく使う -
$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});
- または - と同じくらい
$('input[type="file"]').ajaxfileupload({
'action': '/upload.php',
'params': {
'extra': 'info'
},
'onComplete': function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
},
'onStart': function() {
if(weWantedTo) return false; // cancels upload
},
'onCancel': function() {
console.log('no file selected');
}
});
私は以下のスクリプトを使用して画像をアップロードしましたが、これはうまく機能します。
HTML
<input id="file" type="file" name="file"/>
<div id="response"></div>
JavaScript
jQuery('document').ready(function(){
var input = document.getElementById("file");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
//showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("image", file);
formdata.append("extra",'extra-data');
}
if (formdata) {
jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');
jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
jQuery('div#response').html("Successfully uploaded");
}
});
}
}
else
{
alert('Not a vaild image!');
}
}
}, false);
});
説明
アップロードのアニメーションとアップロードが完了した後の応答を表示するには、応答divを使用します。
このスクリプトを使用するときに、ファイルと一緒にIDなどの追加データを送信できることをお勧めします。スクリプトのようにextra-dataと書いています。
PHPレベルでは、これは通常のファイルアップロードとして機能します。追加データは$_POSTデータとして取得できます。
ここではプラグインやものを使っていません。必要に応じてコードを変更できます。あなたはここで盲目的にコーディングしていません。これがjQueryファイルのアップロードの中核機能です。実際にはJavascriptです。
あなたはとても簡単にVanilla JavaScriptでそれをすることができます。これが私の現在のプロジェクトの抜粋です。
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
var percent = (e.position/ e.totalSize);
// Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
if(this.readyState === 4) {
// Handle file upload complete
}
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);
あなたはjQuery .ajax()で簡単にアップロードすることができます。
HTML：
<form id="upload-form">
<div>
<label for="file">File:</label>
<input type="file" id="file" name="file" />
<progress class="progress" value="0" max="100"></progress>
</div>
<hr />
<input type="submit" value="Submit" />
</form>
CSS
.progress { display: none; }
Javascript：
$(document).ready(function(ev) {
$("#upload-form").on('submit', (function(ev) {
ev.preventDefault();
$.ajax({
xhr: function() {
var progress = $('.progress'),
xhr = $.ajaxSettings.xhr();
progress.show();
xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var percentComplete = parseInt((ev.loaded / ev.total) * 100);
progress.val(percentComplete);
if (percentComplete === 100) {
progress.hide().val(0);
}
}
};
return xhr;
},
url: 'upload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data, status, xhr) {
// ...
},
error: function(xhr, status, error) {
// ...
}
});
}));
});
私が過去にこれを行った最も単純で最も堅牢な方法は、あなたのフォームで隠されたiFrameタグを単にターゲットにすることです - そしてそれはページをリロードせずにiframe内で送信するでしょう。
それはあなたがプラグイン、JavaScript、またはHTML以外の「マジック」の他の形式を使いたくない場合です。もちろん、あなたはこれをJavaScriptと組み合わせることができます。
<form target="iframe" action="" method="post" enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<iframe name="iframe" id="iframe" style="display:none" ></iframe>
サーバエラーや成功の応答についてiframe onLoadの内容を読み、それをユーザに出力することもできます。
Chrome、iFrame、およびonLoad
-note-アップロード/ダウンロードをするときにUIブロッカーを設定する方法に興味があるのなら、読み続ける必要があるだけです
現在Chromeは、ファイルの転送に使用されている場合、iframeのonLoadイベントをトリガーしません。 Firefox、IE、Edgeはすべてファイル転送のためにonloadイベントを発生させます。
私がChromeで使えることがわかった唯一の解決策はクッキーを使うことでした。
アップロード/ダウンロードが開始されたときに基本的にそれをするため：
- [クライアント側]クッキーの存在を探す間隔を開けます
- [サーバーサイド]ファイルデータに必要なことは何でもしてください
- [サーバーサイド]クライアントサイドの間隔にクッキーを設定します
- [クライアントサイド]インターバルはクッキーを見てonLoadイベントのようにそれを使用します。たとえば、UIブロッカーを起動してからonLoad（またはCookieが作成されたとき）すると、UIブロッカーを削除できます。
これにクッキーを使うのは醜いですが、うまくいきます。
ダウンロード時にChromeでこの問題を処理するためのjQueryプラグインを作成しました。
https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js
同じ基本原則がアップロードにも当てはまります。
ダウンローダを使用するには（明らかにJSを含む）
$('body').iDownloader({
"onComplete" : function(){
$('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
}
});
$('somebuttion').click( function(){
$('#uiBlocker').css('display', 'block'); //block the UI
$('body').iDownloader('download', 'htttp://example.com/location/of/download');
});
そしてサーバー側で、ファイルデータを転送する直前に、クッキーを作成します
setcookie('iDownloader', true, time() + 30, "/");
プラグインはクッキーを見てからonCompleteコールバックをトリガーします。
私が見つけた解決策は、<form>を隠しiFrameをターゲットにすることでした。その後、iFrameはJSを実行して（ページロード時に）完了したことをユーザーに表示できます。
これをRails環境で書いた 。軽量のjQuery形式のプラグインを使用する場合、JavaScriptはわずか5行程度です。
課題は、標準のremote_form_forがマルチパートフォームの送信を理解できないため、AJAX uploadを機能させることです。 RailsがAJAXリクエストでシークしたファイルデータを送信するつもりはありません。
そこでjQuery形式のプラグインが登場します。
これがRailsのコードです。
<% remote_form_for(:image_form,
:url => { :controller => "blogs", :action => :create_asset },
:html => { :method => :post,
:id => 'uploadForm', :multipart => true })
do |f| %>
Upload a file: <%= f.file_field :uploaded_data %>
<% end %>
これが、関連するJavaScriptです。
$('#uploadForm input').change(function(){
$(this).parent().ajaxSubmit({
beforeSubmit: function(a,f,o) {
o.dataType = 'json';
},
complete: function(XMLHttpRequest, textStatus) {
// XMLHttpRequest.responseText will contain the URL of the uploaded image.
// Put it in an image element you create, or do with it what you will.
// For example, if you have an image elemtn with id "my_image", then
// $('#my_image').attr('src', XMLHttpRequest.responseText);
// Will set that image tag to display the uploaded image.
},
});
});
そして、これがRailsコントローラのアクションです。
@image = Image.new(params[:image_form])
@image.save
render :text => @image.public_filename
私は過去数週間Bloggityでこれを使ってきました、そしてそれはチャンピオンのように働いていました。
Simple Ajax Uploaderももう1つの選択肢です。
https://github.com/LPology/Simple-Ajax-Uploader
- クロスブラウザ - IE7 +、Firefox、Chrome、Safari、Operaで動作します
- HTML5以外のブラウザでも - 複数の同時アップロードをサポート
- フラッシュも外部CSSもない - たった1つの5Kb Javascriptファイル
- 完全にクロスブラウザのプログレスバーのオプションの組み込みサポート（PHPのAPC拡張を使用）
- 柔軟で高度にカスタマイズ可能 - 任意の要素をアップロードボタンとして使用し、独自の進捗インジケータをスタイルする
- フォームは必要ありません。アップロードボタンとして機能する要素を提供するだけです。
- MITライセンス - 商用プロジェクトでの使用は無料
使用例
var uploader = new ss.SimpleUpload({
button: $('#uploadBtn'), // upload button
url: '/uploadhandler', // URL of server-side upload handler
name: 'userfile', // parameter name of the uploaded file
onSubmit: function() {
this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
},
onComplete: function(file, response) {
// do whatever after upload is finished
}
});
jQuery Uploadify はファイルをアップロードするために以前に使用したもう1つの優れたプラグインです。 JavaScriptコードは次のように単純です。ただし、新しいバージョンはInternet Explorerでは機能しません。
$('#file_upload').uploadify({
'swf': '/public/js/uploadify.swf',
'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
'cancelImg': '/public/images/uploadify-cancel.png',
'multi': true,
'onQueueComplete': function (queueData) {
// ...
},
'onUploadStart': function (file) {
// ...
}
});
私はたくさんの検索をしました、そしてプラグインなしでそしてajaxだけでファイルをアップロードするための別の解決策を見つけました。解決策は以下のとおりです。
$(document).ready(function () {
$('#btn_Upload').live('click', AjaxFileUpload);
});
function AjaxFileUpload() {
var fileInput = document.getElementById("#Uploader");
var file = fileInput.files[0];
var fd = new FormData();
fd.append("files", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'Uploader.ashx');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert('success');
}
else if (uploadResult == 'success')
alert('error');
};
xhr.send(fd);
}
これはファイルをアップロードする方法の別の解決策です（ プラグインなしで ）
単純な Javascripts および _ ajax _ を使用する（プログレスバー付き）
HTML部分
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
JSパート
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
PHP part
<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
echo "$fileName upload is complete";
} else {
echo "move_uploaded_file function failed";
}
?>
var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);
$.ajax({
url:"page.php",
data:formData,
type: 'POST',
dataType:"JSON",
cache: false,
contentType: false,
processData: false,
success:function(data){ }
});
フォームデータを使用して、画像を含むすべての値を投稿できます。
Jqueryと非同期にファイルをアップロードするには、以下の手順に従います。
step 1 あなたのプロジェクトでNugetマネージャを開き、パッケージを追加します（jquery fileupload（あなたが検索ボックスに書いてそれを起動してインストールするだけです））URL： https：// github .com/blueimp/jQueryファイルアップロード
step 2 上記のパッケージを実行してプロジェクトにすでに追加されている以下のスクリプトをHTMLファイルに追加します。
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
ステップ3 以下のコードに従ってファイルアップロードコントロールを作成します。
<input id="upload" name="upload" type="file" />
ステップ4 以下のようにuploadFileとしてjsメソッドを作成します。
function uploadFile(element) {
$(element).fileupload({
dataType: 'json',
url: '../DocumentUpload/upload',
autoUpload: true,
add: function (e, data) {
// write code for implementing, while selecting a file.
// data represents the file data.
//below code triggers the action in mvc controller
data.formData =
{
files: data.files[0]
};
data.submit();
},
done: function (e, data) {
// after file uploaded
},
progress: function (e, data) {
// progress
},
fail: function (e, data) {
//fail operation
},
stop: function () {
code for cancel operation
}
});
};
ステップ5 ready関数内で要素ファイルをアップロードして、以下のようにプロセスを開始します。
$(document).ready(function()
{
uploadFile($('#upload'));
});
ステップ6 以下のようにMVCコントローラーとアクションを書き込みます。
public class DocumentUploadController : Controller
{
[System.Web.Mvc.HttpPost]
public JsonResult upload(ICollection<HttpPostedFileBase> files)
{
bool result = false;
if (files != null || files.Count > 0)
{
try
{
foreach (HttpPostedFileBase file in files)
{
if (file.ContentLength == 0)
throw new Exception("Zero length file!");
else
//code for saving a file
}
}
catch (Exception)
{
result = false;
}
}
return new JsonResult()
{
Data=result
};
}
}
| HTML5の readAsDataURL（） または base64エンコーダー を使用して、ファイルをbase64に変換します。 Fiddle here
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
次に取得する：
window.open("data:application/octet-stream;base64," + base64);
あなたが使用することができます
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
最近のアプローチ Jqueryなし は、ユーザーがファイルを選択したときに<input type="file">から取得した FileList オブジェクトを使用し、次にFileListを投稿するために Fetch を使用することです。 FormData オブジェクトをラップしています。
// The input DOM element
const inputElement = document.querySelector('input');
// Listen for a file submit from user
inputElement.addEventListener('change', () => {
const data = new FormData();
data.append('file', inputElement.files[0]);
data.append('imageName', 'flower');
// Post to server
fetch('/uploadImage', {
method: 'POST',
body: data
});
});
サンプル：あなたがjQueryを使うならば、あなたはアップロードファイルに簡単にすることができます。これは小さくて強力なjQueryプラグイン、 http://jquery.malsup.com/form/ です。
例
var $bar = $('.ProgressBar');
$('.Form').ajaxForm({
dataType: 'json',
beforeSend: function(xhr) {
var percentVal = '0%';
$bar.width(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$bar.width(percentVal)
},
success: function(response) {
// Response
}
});
役に立つことを願っています
実用的なデモで解決された解決策を見ることができます ここで それはあなたがサーバーにフォームファイルをプレビューして提出することを可能にします。あなたのケースでは、サーバーへのファイルのアップロードを容易にするために Ajax を使う必要があります。
<from action="" id="formContent" method="post" enctype="multipart/form-data">
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
</form>
送信されているデータはフォームデータです。 jQueryで、ボタンクリックの代わりにフォーム送信機能を使用して、以下に示すようにフォームファイルを送信します。
$(document).ready(function () {
$("#formContent").submit(function(e){
e.preventDefault();
var formdata = new FormData(this);
$.ajax({
url: "ajax_upload_image.php",
type: "POST",
data: formdata,
mimeTypes:"multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(){
alert("successfully submitted");
});
});
});
XMLHttpRequestを使用して非同期アップロードを行う際に、ファイル名とともに追加のパラメータを渡すことができます（Flashおよびiframeの依存関係なし）。 FormDataに追加のパラメータ値を追加してアップロード要求を送信します。
var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2');
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'post back url',
data: formData,
// other attributes of AJAX
});
また、Syncfusion JavaScript UIファイルのアップロードは、単純にイベント引数を使用してこのシナリオの解決策を提供します。あなたはドキュメンテーションを見つけることができます ここ そしてこのコントロールに関するさらなる詳細はここにリンクの説明を入力してください ここ
ファイルのアップロード処理を非同期的に処理する ここを参照： https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
リンクからのサンプル
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
exit;
}
?><!DOCTYPE html>
<html>
<head>
<title>dnd binary upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/index.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i=0; i<filesArray.length; i++) {
sendFile(filesArray[i]);
}
}
}
</script>
</head>
<body>
<div>
<div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
</div>
</body>
</html>
HTML5 と JavaScript を使用すると、非同期のアップロードは非常に簡単です。私はあなたのHTMLと一緒にアップロードロジックを作成します。あなたのウェブサイトのルートから/uploadと呼ばれるエンドポイントを持っているなら、このコードはあなたのために働くでしょう：
const asyncFileUpload = () => {
const fileInput = document.getElementById("file");
const file = fileInput.files[0];
const uri = "/upload";
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = e => {
const percentage = e.loaded / e.total;
console.log(percentage);
};
xhr.onreadystatechange = e => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("file uploaded");
}
};
xhr.open("POST", uri, true);
xhr.setRequestHeader("X-FileName", file.name);
xhr.send(file);
}<form>
<span>File</span>
<input type="file" id="file" name="file" size="10" />
<input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>XMLHttpRequesに関するその他の情報もあります。
XMLHttpRequestオブジェクト
最近のブラウザはすべてXMLHttpRequestオブジェクトをサポートしています。 XMLHttpRequestオブジェクトは、舞台裏でWebサーバーとデータを交換するために使用できます。つまり、ページ全体をリロードすることなく、Webページの一部を更新することが可能です。
XMLHttpRequestオブジェクトを作成する
最近のすべてのブラウザ（Chrome、Firefox、IE7 +、Edge、Safari、Opera）にはXMLHttpRequestオブジェクトが組み込まれています。
XMLHttpRequestオブジェクトを作成するための構文：
variable = new XMLHttpRequest（）;
ドメインを越えたアクセス
セキュリティ上の理由から、最近のブラウザはドメインを越えたアクセスを許可していません。
つまり、WebページとそれがロードしようとしているXMLファイルの両方が同じサーバー上になければなりません。
W3Schoolsの例はすべて、W3SchoolsドメインにあるXMLファイルを開いています。
上記の例を自分のWebページのいずれかで使用する場合は、読み込むXMLファイルが自分のサーバーにある必要があります。
詳細については、 ここ /を読んで続けることができます。
これが私の解決策です。
<form enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-md-2" for="apta_Description">Description</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
</div>
</div>
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
そしてjs
<script>
$(':button').click(function () {
var formData = new FormData($('form')[0]);
$.ajax({
url: '@Url.Action("Save", "Home")',
type: 'POST',
success: completeHandler,
data: formData,
cache: false,
contentType: false,
processData: false
});
});
function completeHandler() {
alert(":)");
}
</script>
コントローラ
[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
return Json(":)");
}
https://uppy.io のようなものを使うことも検討できます。
それはページから移動せずにファイルのアップロードを行い、ドラッグ＆ドロップのようないくつかのボーナスを提供します。インスタグラム。これはオープンソースであり、jQuery/React/Angular/Vueには依存しませんが、一緒に使用することができます。免責事項：その作成者として私は偏っています;）
JavaScriptで newer Fetch API を使用できます。このような：
function uploadButtonCLicked(){
var input = document.querySelector('input[type="file"]')
fetch('/url', {
method: 'POST',
body: input.files[0]
}).then(res => res.json()) // you can do something with response
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}
利点： Fetch APIは ネイティブにサポートされている すべての最近のブラウザでサポートされているので、インポートする必要はありません。また、fetch（）が Promise を返すことに注意してください。これは、.then(..code to handle response..)を非同期的に使用して処理されます。
次のコードを使うことができます。
async: false(true)
あなたはJavaScriptやjQueryを使ってAsynchronous Multiple Fileをアップロードすることができますし、それをプラグインを使わずに行うこともできます。進行状況コントロールでファイルのアップロードの進行状況をリアルタイムで表示することもできます。私は2つのニースリンクに出会いました -
サーバー側の言語はC＃ですが、PHPのような他の言語でも動作するように修正することができます。
ファイルアップロードASP.NET Core MVC：
HTML作成ビューでファイルアップロードコントロールを作成します。
<form method="post" asp-action="Add" enctype="multipart/form-data">
<input type="file" multiple name="mediaUpload" />
<button type="submit">Submit</button>
</form>
今すぐあなたのコントローラにアクションメソッドを作成します。
[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
//looping through all the files
foreach (IFormFile file in mediaUpload)
{
//saving the files
string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path");
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
}
}
hostingEnvironment変数はIHostingEnvironment型で、依存性注入を使用してコントローラーに注入できます。
private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
hostingEnvironment = environment;
}
PHPの場合、 https://developer.hyvor.com/php/image-upload-ajax-php-mysql を探してください。
_ html _
<html>
<head>
<title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
<input type="file" name="image" id="image-selecter" accept="image/*">
<input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>
_ javascript _
var previewImage = document.getElementById("preview"),
uploadingText = document.getElementById("uploading-text");
function submitForm(event) {
// prevent default form submission
event.preventDefault();
uploadImage();
}
function uploadImage() {
var imageSelecter = document.getElementById("image-selecter"),
file = imageSelecter.files[0];
if (!file)
return alert("Please select a file");
// clear the previous image
previewImage.removeAttribute("src");
// show uploading text
uploadingText.style.display = "block";
// create form data and append the file
var formData = new FormData();
formData.append("image", file);
// do the ajax part
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var json = JSON.parse(this.responseText);
if (!json || json.status !== true)
return uploadError(json.error);
showImage(json.url);
}
}
ajax.open("POST", "upload.php", true);
ajax.send(formData); // send the form data
}
_ php _
<?php
$Host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($Host, $user, $password, $database);
try {
if (empty($_FILES['image'])) {
throw new Exception('Image file is missing');
}
$image = $_FILES['image'];
// check INI error
if ($image['error'] !== 0) {
if ($image['error'] === 1)
throw new Exception('Max upload size exceeded');
throw new Exception('Image uploading error: INI Error');
}
// check if the file exists
if (!file_exists($image['tmp_name']))
throw new Exception('Image file is missing in the server');
$maxFileSize = 2 * 10e6; // in bytes
if ($image['size'] > $maxFileSize)
throw new Exception('Max size limit exceeded');
// check if uploaded file is an image
$imageData = getimagesize($image['tmp_name']);
if (!$imageData)
throw new Exception('Invalid image');
$mimeType = $imageData['mime'];
// validate mime type
$allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($mimeType, $allowedMimeTypes))
throw new Exception('Only JPEG, PNG and GIFs are allowed');
// Nice! it's a valid image
// get file extension (ex: jpg, png) not (.jpg)
$fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
// create random name for your image
$fileName = round(microtime(true)) . mt_Rand() . '.' . $fileExtention; // anyfilename.jpg
// Create the path starting from DOCUMENT ROOT of your website
$path = '/examples/image-upload/images/' . $fileName;
// file path in the computer - where to save it
$destination = $_SERVER['DOCUMENT_ROOT'] . $path;
if (!move_uploaded_file($image['tmp_name'], $destination))
throw new Exception('Error in moving the uploaded file');
// create the url
$protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
$domain = $protocol . $_SERVER['SERVER_NAME'];
$url = $domain . $path;
$stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
if (
$stmt &&
$stmt -> bind_param('s', $url) &&
$stmt -> execute()
) {
exit(
json_encode(
array(
'status' => true,
'url' => $url
)
)
);
} else
throw new Exception('Error in saving into the database');
} catch (Exception $e) {
exit(json_encode(
array (
'status' => false,
'error' => $e -> getMessage()
)
));
}
それは古い質問ですが、それでも答えがない正しい答えなので、：
jQuery-File-Upload を試しましたか？
これはあなたの問題を解決するかもしれない上のリンクからの例です：
$('#fileupload').fileupload({
add: function (e, data) {
var that = this;
$.getJSON('/example/url', function (result) {
data.formData = result; // e.g. {id: 123}
$.blueimp.fileupload.prototype
.options.add.call(that, e, data);
});
}
});
試して
async function saveFile()
{
let formData = new FormData();
formData.append("file", file.files[0]);
await fetch('addFile.do', {method: "POST", body: formData});
alert("Data Uploaded: ");
}<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input type="button" value="Upload" onclick="saveFile()"/>content-type='multipart/form-data'はブラウザによって自動的に設定され、ファイル名も追加されます。 err処理とjsonを追加した、より発展した例です
async function saveFile(inp)
{
let user = { name:'john', age:34 };
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
try {
let r = await fetch('/upload/image', {method: "POST", body: formData});
console.log('HTTP response code:',r.status);
alert('success');
} catch(e) {
console.log('Huston we have problem...:', e);
}
}<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>