时间戳

首页 > 解决方案 > 上传图片并更改现有图片的来源

javascript - 上传图片并更改现有图片的来源

问题描述

我需要上传一张图片并将现有图片的来源设置为上传的一张
图片已上传，但新来源不起作用

<img class='avat' id='avat' src='ph/avat.jpg' alt='img'>
<input type='file' id='inpfile' accept=".jpg">

js

var imgavat = $('#avat');
var inpfile = $('#inpfile');
inpfile.on('change', function(){
    var uid = $('.aact').attr('data-id');
    var file = $(this).prop('files')[0];
    var form = new FormData();
    form.append('inpfile', file);
    form.append('uid', uid);
    $.ajax({
        url: "a_members_pro_plus.php",
        type: 'post',
        cache: false,
        contentType: false,
        processData: false,
        data: form,
        success: function(data){
            console.log(data); // avat/1.jpg - new source - ok
            imgavat.attr('src', data);  // doesn't work
            inpfile.val('');
        }
    });
});

标签： javascriptjquery

解决方案

您可以将FileReader与.readAsDataURL()结合使用，以获取文件并将其替换为头像。

当您使用inpfile在本地计算机上选择文件时，会触发更改事件。

在这种情况下，您需要测试是否有一个文件（用户选择了一个文件）：

this.files[0]

如果文件存在，您可以实例化 FileReader（读取文件所需的）并向其添加加载端的处理程序：

var reader  = new FileReader();
    reader.onloadend = function () {

文件完全加载后，您可以更改头像的属性：

imgavat.attr('src', reader.result);

为了启动这个异步过程，您需要将文件作为数据 url 读取，以便更新头像 src 图像：

reader.readAsDataURL(this.files[0]);

片段：

var imgavat = $('#avat');
var inpfile = $('#inpfile');
inpfile.on('change', function() {
    if (this.files[0]) {   
        var reader  = new FileReader();
        
        reader.readAsDataURL(this.files[0]);
        
        reader.onloadend = function () {
            imgavat.attr('src', reader.result);
        };
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img class='avat' id='avat' src='ph/avat.jpg' alt='img'>
<input type='file' id='inpfile' accept=".jpg">

推荐阅读