gpt4 book ai didi

javascript - 为上传的文件设置图像 url

转载 作者:行者123 更新时间:2023-11-28 08:39:06 26 4
gpt4 key购买 nike

我有一个小问题,我需要将 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();
});

任何帮助将不胜感激,

梅丽莎

最佳答案

试试这个,可能会有所帮助

<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;
}

关于javascript - 为上传的文件设置图像 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20695441/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com