input标签 --- 文件上传与删除

H.F_0331

于 2021-07-09 17:38:59 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_45660840/article/details/118603558

版权

本文介绍了HTML中文件上传和删除的实现方式。删除操作实际上只是清空图片或文件的相关属性，但input标签的value仍保留文件信息，因此需要同时清空input的value以确保彻底删除。

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

上传

<div class="pic_part" v-show="modalData.addPic.url">
    <img alt :src="modalData.addPic.url" style="width: 100%; height: 100%">
    <div class="pic_part-cover">
       <Icon type="ios-trash-outline"  class="pic_delete_icon" @click.native="deletePic"></Icon>
    </div>
</div>

<div v-show="!modalData.addPic.url">
    <input id="uploadPic" type="file" @change="uploadPic" style="display: none" ref="uploadInput"/>
    <div class="add_pic_part" @click="choosePic">
         <Icon type="md-add" class="pic_add_icon"/>
    </div>
</div>

data(){
    return{
        /*新增图片*/
        addPic:{
            fileId: '',
            na

最低0.47元/天解锁文章