我有一个小问题,我需要将img src指向上传的文件,此时它是托管图像,以便我可以显示我希望上传图像的行为。
继承我的HTML文件上传;
<img src="images/upload.png" name="addimg" id="addimg" onClick="addClickedImage('addimg')" /><br /><br />
JS:
$('#file-input').change(function(e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
var canvas = $('#gotcha')[0];
var context = canvas.getContext('2d');
$img.load(function() {
context.drawImage(this, 0, 0);
});
}
var kImage;
var img=new Image();
img.onload=function(){
kImage=new Kinetic.Image({
image:img,
x:175,
y:175,
width:150,
height:150,
offset:[75,75],
draggable:true
});
layer.add(kImage);
kImage.rotate(30*Math.PI/180);
layer.draw();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
$("#rotate").click(function(){
kImage.rotate(kImage.getRotation()+20*Math.PI/180);
layer.draw();
});
非常感谢任何帮助,
梅丽莎
答案 0 :(得分:0)
试试这个,可以帮忙
<input type="file" id="fileupload" name="r1" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png" />
<br />
<img src="" name="addimg" id="addimg" alt="Uploaded Image" /><br />
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var fileId=input.id;
if(ValidateFileExtension(fileId))
{
reader.onload = function (e) {
// alert(e.target.result);
$('#addimg')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
else
{
jAlert("Please select Image file from any of the formats ( bmp, gif, png, jpg, jpeg , tiff )");
$('#'+fileId+'').trigger('click');
}
}
}
var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg" ,"tiff"];
function ValidateFileExtension(id) {
var path = $("#" + id).val();
var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
var isValidFile = false;
for (var i = 0; i < validFilesTypes.length; i++) {
if (ext == validFilesTypes[i]) {
isValidFile = true;
break;
}
}
return isValidFile;
}