JQ实现上传图片在线预览，不经过后台，后台使用表单上传

最新推荐文章于 2023-10-06 20:32:57 发布

weixin_30879833

最新推荐文章于 2023-10-06 20:32:57 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chen1970s/p/8393459.html

本文介绍了一种使用HTML和JavaScript实现文件上传并在线预览图片的方法。通过监听文件输入变化，利用JavaScript获取文件对象并创建URL进行预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html表单结构
<input type="file" class="id-input-file" name="file_url[]">
<img class="middle" src="">
JS部分

//jq上传图片在线预览
$(function () {
    $(document).on('change', '.id-input-file', function () {
        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
        console.log(objUrl);
        if (objUrl) {
            $(this).siblings('.middle').attr("src", objUrl); //将图片路径存入src中，显示出图片
        }
    });
});

//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}