admin 管理员组文章数量: 1086019
I'm having a bit of trouble solving an issue with imaging uploading. I'm using an html file upload form with a jquery function that checks the file type of the image being selected. What I want to do is replace the current image on a web site page with whatever the user decides to upload. However, I cannot find a way to get the full image source path from the upload--I always get a fake path, which doesn't work for what I want to do. Do I really need to create a database for images if I want to do this, or is there some other way? I can't use PHP/MySQL code--only ASP.NET, C#, and SQL/SQL Express.
Here is the code I have so far, which works except I can't successfully replace the default image (which has name and id of "logo) with an uploaded one since I don't get the full path from the uploader. Any suggestions would be very helpful! Thanks in advance!
<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" alt="logo" id="logo" width="200" />
<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>
I'm having a bit of trouble solving an issue with imaging uploading. I'm using an html file upload form with a jquery function that checks the file type of the image being selected. What I want to do is replace the current image on a web site page with whatever the user decides to upload. However, I cannot find a way to get the full image source path from the upload--I always get a fake path, which doesn't work for what I want to do. Do I really need to create a database for images if I want to do this, or is there some other way? I can't use PHP/MySQL code--only ASP.NET, C#, and SQL/SQL Express.
Here is the code I have so far, which works except I can't successfully replace the default image (which has name and id of "logo) with an uploaded one since I don't get the full path from the uploader. Any suggestions would be very helpful! Thanks in advance!
<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" alt="logo" id="logo" width="200" />
<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>
2 Answers
Reset to default 6You can always use the FileSystem API. First, our input:
<input type="file" id="MyImage" />
Listen for the change and grab the file:
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;
}
Hope that helps!
If you use iframe transport you can get the path from iframe when it's loaded.
<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>
on server you can do something like:
$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;
}
}
本文标签： javascriptReplace an image with an uploaded oneStack Overflow
版权声明：本文标题：javascript - Replace an image with an uploaded one - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744082150a2530446.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论