Ajax图片上传不符合预期求助：原生JS实现预览后上传

刚好能帮到你！下面是完全不依赖Dropzone、Plupload这类库的纯原生JS方案，配合一点点jQuery做DOM操作（如果不想用jQuery也可以换成原生DOM方法，我会备注），实现图片预览后再通过FormData发送的功能：

第一步：HTML结构 #

先准备好文件输入框和预览容器：

<!-- 文件选择框 -->
<input type="file" id="fileInput" accept="image/*">
<!-- 图片预览容器 -->
<div id="pimgbox"></div>
<!-- 可选：手动上传按钮 -->
<button id="uploadBtn">上传图片</button>

第二步：JavaScript代码 #

这里把核心逻辑补全，注释都写清楚了：

// 声明全局变量（也可以封装成局部变量避免污染全局，这里保持和你原代码一致）
var finput; 
var fileReader; 
var fd; 

$(function(){
    // 获取文件输入框元素
    finput = $('#fileInput')[0]; // 不用jQuery的话可写成：document.getElementById('fileInput')
    fileReader = new FileReader();

    // FileReader加载完成后，生成预览图片
    fileReader.onload = function(e) {
        var img = document.createElement("img");
        img.src = e.target.result; // 用e.target.result比直接取fileReader.result更稳妥
        img.height = 200; // 固定预览高度
        $('#pimgbox').html(img); // 不用jQuery的话：document.getElementById('pimgbox').innerHTML = img.outerHTML;
    };

    // 监听文件选择事件
    finput.addEventListener('change', function(){
        // 确保有选中文件
        if(this.files.length === 0) return;
        var selectedFile = this.files[0];
        // 只处理图片类型文件
        if(!selectedFile.type.startsWith('image/')){
            alert('请选择图片文件！');
            return;
        }
        // 读取文件生成预览图
        fileReader.readAsDataURL(selectedFile);
        // 初始化FormData，准备后续上传
        fd = new FormData();
        fd.append('uploadedImage', selectedFile); // 'uploadedImage'是后端接收的字段名，按需修改
    });

    // 监听上传按钮点击事件（如果需要手动触发上传）
    $('#uploadBtn').click(function(){
        if(!fd){
            alert('请先选择图片！');
            return;
        }
        // 用原生XMLHttpRequest发送FormData
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/your-upload-api-url', true); // 替换成你的后端上传接口地址

        // 可选：监听上传进度
        xhr.upload.onprogress = function(e){
            if(e.lengthComputable){
                var progress = (e.loaded / e.total) * 100;
                console.log('上传进度：' + progress.toFixed(2) + '%');
            }
        };

        // 上传完成回调
        xhr.onload = function(){
            if(xhr.status === 200){
                console.log('上传成功！', xhr.responseText);
                alert('图片上传成功');
            } else {
                console.error('上传失败', xhr.statusText);
                alert('上传失败，请重试');
            }
        };

        // 发送请求
        xhr.send(fd);
    });
});

关键逻辑说明 #

• 图片预览：通过FileReader.readAsDataURL()把选中的图片文件转换成base64格式，直接赋值给img标签的src属性实现即时预览。
• 文件上传：使用FormData对象封装文件，通过原生XMLHttpRequest发送POST请求，这是最原生的文件上传方式，兼容性覆盖所有现代浏览器。
• 无jQuery适配：如果完全不想用jQuery，把所有$()相关的DOM操作换成原生document.getElementById()即可，核心功能不受影响。

内容的提问来源于stack exchange，提问作者Ande Caleb