HTML
ページから画像ファイルをアップロードする必要があります。しかし、form
タグを使用するつもりはないので、後でサーバーにデータを渡すために使用されるform
フィールド(テキストフィールド、チェックボックスなど)があるためです。JQueryからNode JSに画像をアップロード
私のバックエンドはNode JS
です。私が望むのは、Node Js
最後から画像データ(ファイル)を取り出すことです。私はこの
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<span class="glyphicon glyphicon-cloud-upload"></span>
<h2>File Uploader</h2>
<h4>coligo.io</h4>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<button class="btn btn-lg upload-btn" type="button">Upload File</button>
</div>
</div>
</div>
</div>
</div>
<input id="upload-input" type="file" name="uploads" multiple="multiple"></br>
はどのように行うことができますjQueryの
$('.upload-btn').on('click', function(){
$('#upload-input').click();
$('.progress-bar').text('0%');
$('.progress-bar').width('0%');
});
$('#upload-input').on('change', function(){
var files = $(this).get(0).files;
if (files.length > 0){
// create a FormData object which will be sent as the data payload in the
// AJAX request
var formData = new FormData();
// loop through all the selected files and add them to the formData object
for (var i = 0; i < files.length; i++) {
var file = files[i];
var tmppath = URL.createObjectURL(event.target.files[0]);
// add the files to formData object for the data payload
formData.append('uploads', tmppath);
}
$.ajax({
url: '/myp/imgup',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
console.log('upload successful!\n' + data);
},
xhr: function() {
// create an XMLHttpRequest
var xhr = new XMLHttpRequest();
// listen to the 'progress' event
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
// calculate the percentage of upload completed
var percentComplete = evt.loaded/evt.total;
percentComplete = parseInt(percentComplete * 100);
// update the Bootstrap progress bar with the new percentage
$('.progress-bar').text(percentComplete + '%');
$('.progress-bar').width(percentComplete + '%');
// once the upload reaches 100%, set the progress bar text to done
if (percentComplete === 100) {
$('.progress-bar').html('Done');
}
}
}, false);
return xhr;
}
});
}
});
NODE JS
router.post('/imgup', function(req, res){
console.log(' File name '+req.files.upload);
});
私は運で、数日間のためにこれを実行しようとしています。誰かが私を助けることができますか?
https://github.com/felixge/node-formidable –
私は以前これを疲れましたが、役に立たなかったです。私のコードで間違った方法でそれを適用することがあります。あなたはそれがどのように行われたか私に教えてくれますか? – Illep
この回答はどういうわけかhttp://stackoverflow.com/a/34442688/747579? –