有没有解决方案可以在不使用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");
?>