gpt4 book ai didi

javascript - 从用户输入上传图像,传递到ajax,并返回带有响应的图像

转载 作者:行者123 更新时间:2023-12-03 03:13:21 25 4
gpt4 key购买 nike

我正在传递用户从计算机或手机上传的照片。

html:

<input class="button" type="file" capture="camera" accept="image/*"
id="upload-button" name="cameraInput">

我获取该图像,并将其传递给我的 AJAX 调用,以便将其发送到 API。我试图传递上传的原始图像,但总是出现错误:“coyote1.jpg:1 GET MYAPP.com/coyote1.jpg net::ERR_FILE_NOT_FOUND”

jQuery:

var uploadImage = function() {
var uploadBtn = $('#upload-button');
uploadBtn.change(function(event) {
var formData = new FormData();
var file = event.target.files[0];
formData.append('sampleContent', file);$.ajax({
url: 'MY API ENPOINT,
method: 'POST',
headers: {
'Access-Control-Allow-Origin': '*',
'Authorization':
'Bearer <MY TOKEN>',
'Cache-Control': 'no-cache'
},
data: formData,
processData: false,
contentType: false
}).done(function(res) {
var introArticle = $('#intro');
var htmlCard = introArticle.append($(`<div class="card" </div>`));
var htmlContainer = htmlCard.append($(`<div class="container"></div>`));
var htmlImage = htmlCard.append($(`<img src="${file.name}")}" style="width:100%"/>`));
)};

它试图在我的应用程序中查找照片,但它来自用户。如何将其引导到照片的正确路径?

最佳答案

使用文件阅读器

    var fr = new FileReader();
fr.onload = function () {
var htmlImage = $('<img src="'+fr.result+'" style="width:100%"/>').appendTo('div#result');
}
fr.readAsDataURL(file);

jsFiddle

关于javascript - 从用户输入上传图像,传递到ajax,并返回带有响应的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46869999/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com