zoukankan      html  css  js  c++  java
  • JQ前端上传图片显示在页面以及发送到后端服务器

    // 单张上传照片
     
     
    html:
    <div class="azwoo"></div>
    <div class="azwot">
             <input type="file" name="" class="fileinput13" data-id="9" multiple="multiple">
              <span>选择图片</span>
     </div>
    JS代码:
    解释:我们再看这行代码的背景,HTML5支持multiple属性,即<input type="file">可能会添加multiple属性并赋值:multiple="multiple",
    即<input type="file" multiple="multiple">,这样一次性可同时上传多张图片,所以获得一张图片的方法就是:$('xx')[0].files[0]
        $(" .fileinput13").change(function () {
            var file = this.files[0];
            readFile(file,$(this).parent().siblings(".azwoo"));
            image_id=$(this).attr("data-id");
        });
        var on =document.querySelector(".azwoo");

        //发请求开始

        function readFile(file,element) {
            //        新建阅读器
            var reader = new FileReader();
            //        根据文件类型选择阅读方式
            switch (file.type){
                case 'image/jpg':
                case 'image/png':
                case 'image/jpeg':
                case 'image/gif':
                reader.readAsDataURL(file);
                break;
            };
            //        当文件阅读结束后执行的方法
            reader.addEventListener('load',function () {
                //         如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
                switch (file.type){
                    case 'image/jpg':
                    case 'image/png':
                    case 'image/jpeg':
                    case 'image/gif':
                    var img = document.createElement('img');
                    img.src = reader.result;
                    console.log(image_id+img.src);
                    element.append(img);
                    element.show();
                    $.ajax({
                        type:"post",
                        url:"http://192.168.0.171:8080/WSHD/jiekou7/ADImage",
                        dataType:"json",
                        data:{
                            image:img.src,
                            style:4,
                            id:image_id
                        },
                        success:function(res){
                            console.log("上传成功!!!!!!!!!");
                        
                        }
                    });//请求结束
     
                    break;
                    }
                });
                
            };//readFile函数结束
     
     
  • 相关阅读:
    A debugger is already attached
    鼠标指向GridView某列显示DIV浮动列表
    天气插件的替换
    ZPL打印中文信息
    「PowerBI」使用TabularEditor进行PowerBIDeskTop模型开发最佳实践
    「PowerBI」丢弃SSDT选择TabularEditor成为你的首选建模开发工具(下)
    「PowerBI」丢弃SSDT选择TabularEditor成为你的首选建模开发工具(中)
    「PowerBI」丢弃SSDT选择TabularEditor成为你的首选建模开发工具(上)
    「Azure」数据分析师有理由爱Azure之十-使用PowerShell自动化AzureAS
    「Azure」数据分析师有理由爱Azure之九-填坑-PowerBI Pro连接Azure AS模型
  • 原文地址:https://www.cnblogs.com/xzybk/p/11593246.html
Copyright © 2011-2022 走看看