我在研究或试图弄清楚如何(如果它甚至可能)从类型文件的html输入元素使用JavaScript/jQuery获取二进制图像数据时遇到了麻烦.
我正在使用WebMatrix(C#),但如果仅使用JavaScript/jQuery可以回答这个问题的目的,则可能没有必要知道.
我可以拍摄图像,将其保存在数据库中(作为二进制数据),然后在发布后从二进制数据中显示页面上的图片.然而,在上传之前,这确实让我没有图片预览,我几乎可以肯定我必须使用AJAX.
同样,这甚至可能都不可能,但只要我能获得二进制图像数据,我相信我可以用AJAX将它推送到服务器并以与从数据库中获取它时相同的方式处理图像(请注意,我不使用GUID保存图像文件,所有这些,我只保存二进制数据).
如果有一种更简单的方法来显示使用输入元素的图片预览,那当然也可以正常工作,因为我尝试这样做的整个想法是在他们点击提交表单按钮之前显示图片预览(或至少创造这种错觉).
**********更新***********
我不认为这是另一个问题的重复,因为,我真正的问题是:
如何使用JavaScript/jQuery从输入类型"文件"获取图像数据？
如果我可以将数据(格式正确)返回给服务器,我应该可以在那里使用它,然后用AJAX返回它(尽管,我绝对不是AJAX专家).
根据我所做的研究,没有办法在仅使用javascript的所有IE版本中获取图片预览(这是因为他们认为获取完整文件路径是潜在的安全风险).我可以要求我的用户将该网站添加到受信任的网站,但您通常不会要求用户篡改这些类型的设置(更不用说让您的网站对用户显得怀疑的最快方法就是直接要求他们将您的网站添加到可信站点列表.这就像发送电子邮件并要求输入密码."只要相信我!我太安全了!":)
我想在div中预览上传的图像文件.我做了一些研究,我从这篇文章中找到了这段代码,它是预览上传图像文件的<img>代码,但是在标签中:
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
相关的HTML:
<body>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
</body>
很酷.但是,我想要的是将上传的图像显示为div的背景图像,其示例如下:
<div class="image" style="background-image:url('');"></div>
我知道,从逻辑上讲,我必须更换
$('#blah').attr('src', e.target.result);
喜欢的东西
$('div.image').attr('style', e.target.result);.
但是如何使图像的路径进入"背景图像"属性的值？
是的,我需要链接到JQuery库吗？
谢谢.
我使用"重力形式"制作了一个联系表格,其中我使用了图像上传器.现在我想向正在上传的用户显示图像预览.反正有没有实现这个目标？
我试图在手机上制作一个上传图片网页,但它总是耗尽内存,一旦图片太大,浏览器就会退出.这是我的代码:
<input type="file" id="testFile" />
<img src="" style="position:relative;" id="uploadingImg" />
function setImage() {
var fileList = this.files;
var imageType = /image/;
for(var i = 0;i < fileList.length;i++) {
document.getElementById('uploadingImg').file = fileList[i];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('uploadingImg').src = e.target.result;
}
reader.readAsDataURL(fileList[i]);
}
}
document.getElementById('testFile').addEventListener('change', setImage, false);
有谁知道如何使用<img>或<canvas>元素预览一张图片？请不要使用"readAsDataURL",因为当涉及到document.getElementById('uploadingImg').src = e.target.result;
它将耗尽内存.因为base64 Url占用了太多内存,并且它在内存中存在许多三或四个副本.
我如何使用"readAsArrayBuffer"和使用"drawImage"画布？或其他方法？
一切正常,如果我可以预览在本地磁盘上一个画面,而无需使用"readAsDataUrl".
谢谢!
我想选择一个文件并在浏览器中显示图像。我尝试插入直接图像路径，它起作用了。
现在的问题是，如何显示图像<input type=file>？
这是我的代码：
function myFunction() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.onloadend = function {
var image = document.createElement("img");
image.src = "reader"
image.height = 200;
image.width = 200;
document.body.appendChild(image);
}
}
<input type=file name=filename id=file>
<button type=button onclick='myFunction()'>Display</button>
我想在用户将图像上传到服务器之前向用户显示图像,以确保该图像是用户想要上传的图像.
我已经尝试过这样做$_FILES['name']['tmp_name']并把它放在标签中,但没有任何反应.
<form action='' method='POST' enctype="multipart/form-data">
<header class='pageHeading'>Kop afbeedling toevoegen</header>
<section class='body'>
<div class='inputFrame'>
<img src="<?php if(isset($_FILES['image']['tmp_name'])){echo $_FILES['image']['name'];}?>"/>
<div class='input'>
<div class="cellFrame">
<div class="inputHeading">Afbeelding uploaden</div>
<div class="frame">
<div class="frameAlign">
<div class="displayFlie">
<input type='file' name='image'/>
</div>
<button name='upload' class='btnUpload btn'>Upload</button>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
</form>
我正在使用blob下载文件，问题是即使下载文件后，我也希望保留对象URL，而无需在代码库中进行重大更改。
因此，一种选择是不致电 URL.revokeObjectURL();
依靠浏览器的垃圾回收器来避免任何内存泄漏是否安全？
我是否总是需要URL.revokeObjectURL();显式呼叫？
我的问题是如何将div的背景图像更改为由输入文件元素选择的图像.当站点的用户点击另一个输入元素时,隐藏并执行文件输入是该代码:
$(function(){
$('#verborgen_file').hide();
$('#uploadButton').on('click',function(){
$('#verborgen_file').trigger('click');
});
});
所以文件输入是#verborgen_file而另一个输入是#uploadButton现在我正在寻找一种方法,当用户点击#uploadButton并因此触发#verborgen_file并选择一个图像(并且只有一个图像)时,背景图像div #pf_foto更改为所选图像.
我已经尝试了很多东西,但是无法让它工作所以提前谢谢!
- - 编辑 - -
我试过这个:
$("#verborgen_file").on("change", function(){
var files = !!this.files ? this.files : [];
if ( !files.length || !window.FileReader ) return;
if ( /^image/.test( files[0].type ) ) {
var reader = new FileReader();
reader.readAsDataURL( files[0] );
reader.onloadend = function(){
$("#pf_foto").css("background-image", "url(" + this.result + ")");
}
}
});
我从 nodejs 上传图片到 vue 并将图片放入 v-card
但是图片被剪掉了
如何通过不剪切来调整图像大小？
javascript ×5
jquery ×4
image ×3
input ×2
upload ×2
ajax ×1
base64 ×1
blob ×1
css ×1
file ×1
file-upload ×1
filereader ×1
fonts ×1
html ×1
html5 ×1
memory-leaks ×1
php ×1
tmp ×1
vue.js ×1
vuejs2 ×1
vuetify.js ×1
webmatrix ×1
wordpress ×1