用上传的图片替换图片
Posted
技术标签:
【中文标题】用上传的图片替换图片【英文标题】：Replace an image with an uploaded one 【发布时间】：2013-03-03 00:45:03 【问题描述】：我在解决图像上传问题时遇到了一些麻烦。我正在使用带有 jquery 函数的 html 文件上传表单，该函数检查所选图像的文件类型。我想要做的是用用户决定上传的任何内容替换网站页面上的当前图像。但是，我找不到从上传中获取完整图像源路径的方法——我总是得到一个假路径，这对我想做的事情不起作用。如果我想这样做，我真的需要为图像创建一个数据库，还是有其他方法？我不能使用 php/mysql 代码——只能使用 ASP.NET、C# 和 SQL/SQL Express。
这是我到目前为止的代码，除了我无法用上传的图片成功替换默认图片（名称和 ID 为“logo”），因为我没有从上传者那里获得完整路径. 任何建议都会非常有帮助！提前致谢！
<html>
<head>
<title>Image Swap Widget Testing</title>
<style type="text/css">
.myWebForm
border: 4px solid grey;
width: 300px;
height: 200px;
padding: 10px;
font-family: Arial;
font-size: small;
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function ()
$('INPUT[type="file"]').change(function ()
var ext = this.value.match(/\.(.+)$/)[1];
switch (ext)
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
case 'bmp':
$('#uploading').attr('disabled', false);
$('#logo').attr("src", $('#uploading').val());
alert('image approved!');
alert($('img').attr('src'));
alert($('img')[0].src);
alert($('#uploading').val(img.src));
break;
default:
alert('This is not an allowed file type.');
this.value = '';
);
$('#addButton').click(function ()
//alert('Add Image Button was clicked');
//var newImgSrc = getSrc($('#uploading').val());
//$('#logo').attr("src", newImgSrc);
//alert($('#logo').attr("src"));
//alert($('#uploading').val());
);
);
</script>
</head>
<body>
<img src="Lighthouse.jpg" name="logo" id="logo" />
<br/>
<form name="myWebForm" class="myWebForm" action="#" method="post">
<h3>Change Default Logo</h3>
<input type="file" name="uploadField" id="uploading" />
<p><b>Allow extensions:</b> .png, .bmp, .jpg, .jepg, .gif<p>
<p><b>Dimensions:</b> 50px x 80px<p>
<input type="button" name="addButton" id ="addButton" class="addButton" value="+ Add" />
<input type="button" name="cancelButton" id ="cancelButton" class="cancelButton" value="X Cancel" />
</body>
</html>
【问题讨论】：
【参考方案1】：如果您使用 iframe 传输，则可以在加载时从 iframe 获取路径。
<script>
$('#upload-frame').load(function(e)
$('img').attr('src', $(this).contents().find('body').html());
);
</script>
<form method="post" action="upload.php" enctype="multipart/form-data"
id="upload-form" target="upload-frame">
<input type="file" name="uploadField" id="uploading" />
<input type="submit" value="upload"/>
</form>
<iframe id="upload-frame" name="upload-frame"></iframe>
在服务器上，您可以执行以下操作：
$info = pathinfo(basename($_FILES['image']['name']));
$ext = strtolower($info['extension']);
if (in_array($ext, array('png', 'jpg', 'gif', 'bmp')))
$path = 'SOME/PATH/filename.' . $ext;
if (move_uploaded_file($_FILES['image']['tmp_name'], $path))
echo $path;
【讨论】：
@MarcelKorpel 抱歉，我不了解 Asp.Net，但我相信您也可以这样做。只需搜索upload asp.net【参考方案2】：
您始终可以使用文件系统 API。首先，我们的输入：
<input type="file" id="MyImage" />
监听变化并抓取文件：
document.getElementById('MyImage').onchange = function(e)
// Get the first file in the FileList object
var imageFile = this.files[0];
// get a local URL representation of the image blob
var url = window.URL.createObjectURL(imageFile);
// Now use your newly created URL!
someImageTag.src = url;
希望有帮助！
【讨论】：
没问题！我很高兴能帮上忙。真的是答案吗？如果是这样，请将其标记为已回答，但如果不是，我很高兴我能指出你正确的方向:)以上是关于用上传的图片替换图片的主要内容，如果未能解决你的问题，请参考以下文章
ASP中如果上传的头像为空，如何自动替换成任意一个图片，但不可以重复