JavaScript選擇圖像到img標簽

Question

我為一個班級項目使用了偽造的個人檔案系統，它需要個人檔案圖片，並且需要一個在本地（從您的硬盤驅動器）進行更改的選項。 我有一個工作的img標簽，默認情況下保存有一個占位符圖像，並且當您單擊change picture ，將打開一個打開文件對話框。 我現在需要做的就是設置img標簽的圖像鏈接以及他們選擇的圖像。 到目前為止，這就是我所擁有的。

<div id="userphoto">
    <a><div class="gravatar-wrapper-128"><img id="image" src="http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg" alt="" class="logo" width="120" height="120"></div></a>
    <div class="change-picture-slide" style="top: 30px;">
        <input accept="image/*" type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" />
        <a href="" onclick="changePicture(); return false">Change Picture</a>
    </div>
</div>
<script>
    function changePicture() {
        //open the open file dialog
        document.getElementById('upload').click();
        var link = document.getElementById('upload').url;
        //change picture
        var img = document.getElementById("image");
        img.src = link;
    }
</script>

知道無法做到這一點后，如何將用戶選擇的圖像匿名上傳到imgur並使用此鏈接？

Answer 1

您可以使用javascript中的文件閱讀器來嘗試此操作。

<div id="userphoto">
        <div class="gravatar-wrapper-128"><img id="image" src="body-img.jpg" alt="" class="logo" width="120" height="120"></div>
        <div class="change-picture-slide" style="top: 30px;">
            <input accept="image/*" type="file" id="upload" name="upload" onchange="readURL(this);"style="visibility: hidden;" />
            <a href="" onclick="changePicture(); return false">Change Picture</a>
        </div>
    </div>
    <script>
        function changePicture(){
            $('#upload').click();
        }
        function readURL(input)
        {
            if (input.files && input.files[0])
            {
                var reader = new FileReader();
                reader.onload = function (e)
                {
                    $('#image')
                    .attr('src',e.target.result);

                };
                reader.readAsDataURL(input.files[0]);
            }
        }



    </script>

Answer 2

好吧，假設您僅在客戶端工作，則本機文件上傳界面（ 如我所找到的 ）不允許您這樣做。

<input type="file"/>對您有用的唯一時間是提交給服務器的form ，因為瀏覽器的安全措施阻止您對它進行任何其他操作。

由於文件上傳，現代瀏覽器會在客戶端為您提供偽造的文件路徑，以防止對用戶文件系統的惡意行為。

但是，我認為Ink Filepicker API完全提供了您正在尋找的功能。 用戶上載文件時，它將返回一個對象，該對象包含文件名和指向其下載位置的URL ，這正是您要查找的內容（這將填充圖像的src屬性）。

實際上，設置非常簡單。

首先，注冊一個免費帳戶並獲取一個API密鑰。 在您的head ，將其設置如下：

<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<script>filepicker.setKey('API_KEY');</script>

然后，您可以訪問所有API的功能。

要執行您要的操作，您需要創建一個像這樣的按鈕：

<button onclick="handleFiles();">Upload Image</button>

單擊它會為用戶提供一個對話框，以選擇一個如下所示的文件：

然后，創建一個處理函數：

<script>
    function handleFiles() {
        filepicker.pick({
            mimetypes: ['image/*'],
            //you can also define what uploading services you want to use here
        },
        function(e) { //you now have access to the file
            var link = e.url;
            //change picture
            var img = document.getElementById("image");
            img.src = link;            
        });
    }
</script>

我發現這是一個非常有用的API： 這是docs 。

演示版

Answer 3

我相信代碼是：

var link = document.getElementById('unpload').value;

在AstroCB發表評論后進行更新：

然后，您可以使用：

var link_split = link.split('\');
var link = link_split.length;

或類似的東西我不是100％確定語法，也許有人可以為您提供更多幫助

Answer 4

有FileReader.readAsDataURL（請參閱Indra的答案）以及window.URL.createObjectURL：

function changePicture() {
    //open the open file dialog
    document.getElementById('upload').click();
    document.getElementById('upload').onchange = function() {
        var file = this.files[0];
        var url = window.URL.createObjectURL(file);
        document.getElementById('image').src = url;
    };
}