如何在不使用文件阅读器的情况下预览图像上传
How to preview image upload without using FileReader
有没有解决方案可以在不使用FireReader的情况下预览图像上传(或伪造它)?
您可以通过 Ajax 将文件发送到服务器(是的,这是可能的),然后让服务器向您发送该临时文件的 URL 并将其显示在前端。避免使用文件 API 有点麻烦,但如果必须,这是我知道的唯一不依赖 Flash 的方法......
即使只是为了获得灵感,也请务必检查此插件。
您还可以查看此线程,其中详细介绍了许多其他执行此操作的方法。
希望这有帮助!
我为我的大学项目编写了以下代码,并且它在本地服务器上运行良好。这个想法是使用 iframe 作为 ajax 无法处理二进制数据隐藏这些框架隐藏 php 表单按钮并使用 fake 按钮浏览和上传文件(在这种情况下,如果用户按下上传按钮,请替换用户的个人资料图片).我没有包含用于删除或丢弃按钮的代码,因为它仍在进行中,但它很容易,您只需运行 ajax 调用并调用一些 php 脚本即可删除那个临时文件。代码很大,包括所有javascript/jquery,php和html片段,所以如果你有一些疑问,请问。
脚本代码
var photoname;
$('#profilepic ').delegate('button#uploader1','click',function () {
if ($(this).prop("type") == "button") {
$('#profilepic').attr('target','hiddenframe1').attr('action','/phpScripts/tempphoto.php');
$('#uploadphoto').removeAttr('src');
$('#profilepic input#photo').click();
$(this).remove();
$('<button type="submit" id="uploader2">Upload</button>').insertBefore($('#profilepic button#removephoto'));
setTimeout(function () {
var interval = setInterval(function () {
if ($('#photo').val()) {
photoname = $('#photo').val().substring($('#photo').val().lastIndexOf('''') + 1)
$('#profilepic input#submit').trigger('click', function (event) {})
setTimeout(function(){
$('#profilepic').css(
{
backgroundImage: 'url(/data/' + usr +'/'+photoname + ')'
})
},1000);
clearInterval(interval);
}
}, 200);
}, 200);
}
})
$('#profilepic ').delegate('#uploader2','click',function (){
if ($(this).prop("type") == "submit") {
$('#profilepic').attr('target','hiddenframe2').attr('action','/phpScripts/uploadphoto.php');
$('#uploadphoto').attr('src','/phpScripts/uploadphoto.php');
$('#profilepic input#submit').click();
$(this).remove();
$('<button type="button" id="uploader1">Browse</button>').insertBefore($('#profilepic button#removephoto'));
document.getElementById('profilepic').reset();
}
})
首次加载或刷新页面时的 HTML 文件
<form id="profilepic" target="hiddenframe1" action="/phpScripts/tempphoto.php" method="post" enctype="multipart/form-data" style="background-image: url(http://www.xyz.com/data/UDB/UDB.jpg); width: 180px; height: 180px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
<input type="file" name="photo" id="photo" style="display: none;">
<input type="submit" name="submit" value="Submit" id="submit" style="display: none;">
<button type="button" id="uploader1" style="display: none;">Browse</button>
<button type="button" id="removephoto" style="display: none;">Remove</button>
</form>
<iframe id="tempphoto" name="hiddenframe1" src="/phpScripts/tempphoto.php"></iframe>
<iframe id="uploadphoto" name="hiddenframe2"></iframe>
php文件临时照片.php
<?php
session_start();
$dt=$_SESSION['uname'];
$dest=$_SERVER['DOCUMENT_ROOT']."/data/$dt/";
$filename;
if ($_FILES["photo"]["error"] > 0)
{
echo "Error: " . $_FILES["photo"]["error"] . "<br>";
}
else
{
echo "Upload: " . $_FILES["photo"]["name"] . "<br>";
echo "Type: " . $_FILES["photo"]["type"] . "<br>";
echo "Size: " . ($_FILES["photo"]["size"] / 1024) . " kB<br>";
echo "Stored in: " . $_FILES["photo"]["tmp_name"];
move_uploaded_file($_FILES['photo']['tmp_name'], $dest.$_FILES['photo']['name']);
$filename=$_FILES["photo"]["name"];
}
?>
php文件上传照片.php
<?php
session_start();
$dt=$_SESSION['uname'];
$dest=$_SERVER['DOCUMENT_ROOT']."/data/$dt/";
$filename;
if ($_FILES["photo"]["error"] > 0)
{
echo "Error: " . $_FILES["photo"]["error"] . "<br>";
}
else
{
echo "Upload: " . $_FILES["photo"]["name"] . "<br>";
echo "Type: " . $_FILES["photo"]["type"] . "<br>";
echo "Size: " . ($_FILES["photo"]["size"] / 1024) . " kB<br>";
echo "Stored in: " . $_FILES["photo"]["tmp_name"];
move_uploaded_file($_FILES['photo']['tmp_name'], $dest.$_FILES['photo']['name']);
$filename=$_FILES["photo"]["name"];
}
unlink($dest.$dt.".jpg");
rename($dest.$filename,$dest.$dt.".jpg");
?>
相关文章:
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 在Widget代码中没有jQuery的情况下,用光标图像从左滑动到右
- 在以下情况下,如何设置图像的宽度
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- 在不影响原始画布外观的情况下调整图像大小
- 如何在没有 Ajax 的情况下将图像拖放到 servlet
- 如何在不横向使用css、jquery或javascript的情况下获得正确的图像
- 在不丢失纵横比的情况下调整图像大小
- 如何在没有视网膜显示的情况下测试视网膜图像置换
- "“照片擦除”;画廊关闭自己的图像点击在小图像的情况下
- 在没有表单的情况下通过AJAX上传图像
- Bxslider预加载程序在没有图像的情况下以无限循环运行
- 在不损失质量的情况下调整图像JavaScript/jQuery的大小
- 如何在不调整大小或裁剪的情况下制作整页背景图像
- 我想在不使用额外插件的情况下使用鼠标拖动来创建图像滑块
- 如何在不干扰页面其余部分的情况下预加载图像's的东西
- 学习JavaScript:有没有办法在不使用个人ID的情况下更改一组图像的图像文件
- 在没有jQuery的情况下处理丢失的图像
- 在不旋转元素尺寸的情况下旋转图像