为上传的文件设置图片 url答案

【问题标题】：Setting an image url for an uploaded file为上传的文件设置图片 url
【发布时间】：2014-01-08 19:59:17
【问题描述】：

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

任何帮助将不胜感激，

梅丽莎

【问题讨论】：

我认为我在与此类似的正确行上，但它不太工作:( img.src = document.getElementById(name).getAttribute("src");

标签： javascript html canvas kineticjs

【解决方案1】：

试试这个，可能有帮助

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

【讨论】：