jquery 上传图片 预览

在网页的开发中，上传图片和预览图片是比较常见的需求。jQuery作为JavaScript框架的一种，可以帮助我们更方便地实现图片上传和预览功能。 要使用jQuery实现图片上传和预览，我们首先需要自定义一个表单，并给表单添加一个input标签，input标签的type属性为file表示这是一个可以上传文件的表单。 下面是自定义表单的代码：

<form id="upload-form" enctype="multipart/form-data">
    <input type="file" id="upload-input" name="upload">
</form>

需要注意的是，上传文件时需要设置表单的enctype属性值为multipart/form-data。 接下来，我们需要编写jQuery代码来监听input标签的change事件，一旦input上传状态有变化，就会执行我们的代码。 下面是监听change事件的代码：

$('#upload-input').on('change', function() {
    // 获取文件
    var file = this.files[0];
    // 处理文件并预览
});

在change事件的回调函数中，我们需要获取用户选择的文件，并进行预览。我们使用FileReader对象来读取文件。 下面是获取文件和预览的代码：

$('#upload-input').on('change', function() {
    // 获取文件
    var file = this.files[0];
    // 处理文件并预览
    var reader = new FileReader();
    reader.onload = function(e) {
        // 将图片显示在页面上
        $('#preview').attr('src', e.target.result);
    }
    reader.readAsDataURL(file);
});

通过以上代码，我们已经可以成功地实现图片上传和预览功能。需要注意的是，在预览图片之前，我们需要在html文件中添加一个img标签来显示预览图片。 下面是预览图片的代码：

<img id="preview" src="" alt="preview image">

总的来说，使用jQuery实现图片上传和预览功能，虽然需要一些代码，但是方便易用，可以省去很多繁琐的操作，大大提高了网页的开发效率。