原生HTML标签和JavaScript语言实现文件(图片、文档、视频)上传

谁借莪１个温暖的怀抱￠ 2022-01-27 07:17 103阅读 0赞

###### *最新更新时间：2019年05月25日20:20:34* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：input标签实现文件上传，FormData对象实现文件上传

#### 实现代码 ####

//以图片为例，实现单文件上传
    .courseSaleInfoUpload{ 
    	width:50px;
    	height: 50px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%);
    	opacity: 0;
    	cursor: pointer;
    }
    <input
    	className={ styles.courseSaleInfoUpload}
    	type='file'
    	accept="image/*"
    	onChange={ (e)=>{ this.uploadFileChange(e)}}
    />
    
    beforeUpload = (file) => { 
        const isIMG = ['image/jpeg','image/jpeg','image/png'].indexOf(file.type) != -1;
        if (!isIMG) { 
          message.error('只能上传jpg、jpeg、png类型的图片');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) { 
          message.error('图片大小不能超过2MB!');
        }
        return isIMG && isLt2M;
    }
      
    uploadFileChange(e){ 
        let file = e.currentTarget.files[0];//{size:'',name:''}
        if(!this.beforeUpload(file)){ 
          return
        }
        uploadFile(file).then((res)=>{ 
          console.log(res);
          if(res.code == 100){ 
            //文件上传成功
          }else{ 
            message.destroy()
            message.error('上传失败，请重新上传');
          }
        })
    };
    
    //post方法
    function uploadFile(file) { 
      return new Promise((resolve,reject)=>{ 
        let url = 'http://10.201.16.82:8100/cadet/file/uploadFile'
        let formData = new FormData
        //post 接口需要的其他参数
        formData.append('params1', '')
        formData.append('params2', '')
        //文件数据
        formData.append('file', file)
        let xhr = null
        if(window.XMLHttpRequest){ 
    		xhr = new XMLHttpRequest()
    	}else{ 
    		xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	}
        xhr.onload = function () { 
          let data = JSON.parse(xhr.responseText)
          resolve(data)
        }
        xhr.onerror = function () { 
          console.log('fail')
          reject('error')
        }
        xhr.open('post', url , true)//async ture-异步 false-同步
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.send(formData)
      })
    }
    
    //post方法
    function uploadFile(file) { 
      return new Promise((resolve,reject)=>{ 
        let url = 'http://10.201.16.82:8100/cadet/file/uploadFile'
        let formData = new FormData
        //post 接口需要的其他参数
        formData.append('params1', '')
        formData.append('params2', '')
        //文件数据
        formData.append('file', file)
        let xhr = new XMLHttpRequest()
        xhr.open('post', url , true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.onreadystatechange = function() { 
          //readyState 0-请求未初始化 1-服务器连接已建立 2-请求已接收 3-请求处理中 4-请求已完成，且响应已就绪（下载操作已完成）
          if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { 
            let data = JSON.parse(xhr.responseText)
            resolve(data)
          }
        };
        xhr.send(formData)
      })
    }
    
    //扩展 get方法原生实现
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', 'http://10.201.16.82:8100/cadet/file/uploadFile?a=1&b=2', true);
    xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {  
      
      }
    };
    xhr.send();

###### todo ######

> 多文件上传 form原理 后端实现原理 进度显示

#### 参考资料 ####

*  [FormData.append()][FormData.append]
 *  [FormData()][FormData]
 *  [form - HTML][]
 *  [XMLHttpRequest上传文件实现进度条][XMLHttpRequest]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[FormData.append]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append
[FormData]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData
[form - HTML]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
[XMLHttpRequest]: https://www.cnblogs.com/tianyuchen/p/5594641.html
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460