web前端图片上传的几种方式,FromDate上传及时预览,html表单上传及时预览 - 前端笔记-一,html表单上传图片,配合js实现即时预览 利用html表单上传图片,使用from表单的input标签file类型控件,配合js实现上传及时预览 上传图片前需要了解几点知识 1...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>web前端图片上传的几种方式,FromDate上传及时预览,html表单上传及时预览 - 前端笔记
一,html表单上传图片,配合js实现即时预览

利用html表单上传图片,使用from表单的 input标签file类型控件,配合js实现上传及时预览

上传图片前需要了解几点知识
1.上传图片,表单method必须是post传值,不能设置get传值
2.form表单必须设置enctype=“multipart/form-data”,(其实每个表单都有,你不设置他的默认值就是enctype=“application/x-www-form-urlencoded”
3.每个input标签file类型的上传域表单,都有一个files(里面存储的一些上传图片的信息)
4.要利用 文件读取对象,new FileList  对象地下的readAsDataURL 方法(此方法会读取指定的 Blob 或 File 对象)

    <form action="地址填写后端接收地址" method="POST" enctype="multipart/form-data">
        <p>上传图片名称</p>
        <img src="#" alt="" id="img">
        <input type="file" name="file" id="file">
    </form>
    <script>
        let file = document.querySelector('#file');
        let img = document.querySelector('#img');
        file.addEventListener('change'function() {
            console.log(this.files); // 显示 FileList {0: File, length: 1}
            //实现图片事实显示
            // 实现思路:
            // 1.监听文件域上传  使用onchange监听
            // 2.创建读取文件对象,利用new FileReader  创建
            // 3.读取文件 每个文件域都有一个files 
            // 4.等图片读取完,在把 router.result 获取地址,赋值给图片
            var router = new FileReader(); //创建读取文件对象
            console.log(router); //FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null, …}
            router.readAsDataURL(this.files[0]); //读取文件路劲
            router.onload = function() {
                img.src = router.result;
            }
        });
    </script>

二,通过发送ajax请求和FormData函数可以实现无刷新上传图片效果,配合jq实现即时预览

在这里我们通过jQuery的,已经封装好的ajax函数发送ajax请求,并使用FormData函数(FormData函数,是将form表单元素的name与value进行组合,并异步上传文件)

   <!-- //引入jq文件 -->
    <script src="./3.4.1/jquery.min.js"></script>
    <!-- 创建from表单 -->
    <form action="地址填写后端地址" method="POST">
        <p>上传图片名称</p>
        <img src="#" alt="" id="img">
        <input type="file" name="file" id="file">
    </form>
    <!-- //写入jq代码 -->
    <script>
        $('#file').on('change'function() {
            let formData = new FormData();//创建 formData实例 
            formData.append('file'this.files[0]); //给formData实例添加一个 表单项  
            console.log(formData);
            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1/home/1',
                data: formData,
                processData: false,//告诉jQuery不用处理发送的数据
                contentType: false,//考试jQuery不用设置content-type请求头
                successfunction(con) {
                    // con[0].path   //就服务器返回的  图片路径(路径是相对服务器的)
                    $('#img').prop('src',con[0].path);
                },
                errorfunction(err) {
                    console.log(err) //返回的错误信息
                }
            });
        });
    </script>

三,插件上传图片
1.Web Uploader   ----  支持多图上传,大文件上传,压缩图片上传,预览等  
2.jQuery插件 
3.Dropzone.js拖拽上传与图像预览插件

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » web前端图片上传的几种方式,FromDate上传及时预览,html表单上传及时预览
版权所有:《前端笔记
文章标题:《web前端图片上传的几种方式,FromDate上传及时预览,html表单上传及时预览
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-17.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)