zoukankan      html  css  js  c++  java
  • 关于图片上传

    1、图片类型的过滤

     1 //过滤类型
     2     function fileType(obj){
     3         var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
     4         if(fileType != '.gif' && fileType != '.png' && fileType != '.jpg' && fileType != '.jpeg'){
     5             $("#tp").tips({
     6                 side:3,
     7                 msg:'请上传图片格式的文件',
     8                 bg:'#AE81FF',
     9                 time:3
    10             });
    11             $("#tp").val('');
    12             document.getElementById("tp").files[0] = '请选择图片';
    13         }
    14     }
    15     

    2、图片的删除

    //删除图片
        function delP(PATH,PICTURES_ID){
             if(confirm("确定要删除图片?")){
                var url = "pictures/deltp.do?PATH="+PATH+"&PICTURES_ID="+PICTURES_ID+"&guid="+new Date().getTime();
                $.get(url,function(data){
                    if(data=="success"){
                        alert("删除成功!");
                        document.location.reload();
                    }
                });
            } 
        }

     3、图片上传的预览

    1 var file = this.files[0]; // 选择上传的文件
    2         var r = new FileReader();
    3         r.readAsDataURL(file); // Base64
    4         $(r).load(function() {
    5             $('.shop_img').html('<img src="' + this.result + '" alt="" /><a class="photo_add">修改</a>');
    6         });

     4、H5的上传组件

     1 //保存文件
     2         var fileObj = document.getElementById("PHOTO").files[0]; // 获取文件对象
     3         var FileController = "organization/webMarkertEdit"; //获取路劲
     4          // FormData 对象
     5         var form = new FormData();
     6         //判断是否上传了图片
     7         form.append("PHOTO", fileObj);                    // 文件对象
     8         form.append("MARKETER_ID",$("#MARKETER_ID").val());
     9         form.append("MOBILE",$("#MOBILE").val());
    10         form.append("ADDRESS",$("#ADDRESS").val());
    11         form.append("BEFORE_PHOTO",$("#BEFORE_PHOTO").val());
    12         // XMLHttpRequest 对象
    13         var xhr = new XMLHttpRequest();
    14         //设置回调函数    
    15         xhr.onreadystatechange = zswFun;
    16         xhr.open("post", FileController, false);
    17         xhr.onload = function (data) {
    18             console.log("上传完成!");
    19         };
    20         xhr.send(form);
    21         
    22         function zswFun(){
    23             if(xhr.readyState == 4 && xhr.status == 200){
    24                 swal({title:"修改成功!",text:'',type:"success"},function(){
    25                     window.location.href="webPage/mystore?MARKETER_ID="+$("#MARKETER_ID").val();
    26                 });
    27             }
    28         }
  • 相关阅读:
    java8新特性LocalDate、LocalTime、LocalDateTime的学习
    vue在移动端使用alloyfinger手势库操作图片拖拽、缩放
    移动端设置滚动后显示滚动条
    springboot使用swagger2生成开发文档
    学习Validator验证框架总结
    对于线程池ThreadPool的学习总结
    apache-commons和guava的工具类
    Mac中anaconda中创建虚拟python环境,配置flask
    ubuntu系统中解决桌面分辨率不适配问题
    Linux服务器命令说明
  • 原文地址:https://www.cnblogs.com/xyt-0412/p/4800514.html
Copyright © 2011-2022 走看看