• 上传文件的两种方式


     由于我的页面有多个上传文件的input所以需要传一个index进去区分,如果只有一个上传可以将index去掉

    //上传图片
    function upLoad1(index){
        var formData = new FormData();
        var img_file = document.getElementById("upimg"+index);
        var fileObj = img_file.files[0];
        console.log(fileObj.size)
        var size=fileObj.size/1024;
        if(size>2000){
            toast('图片不能超过2M')
            fileObj=""
            return
        }else{
            formData.append("file",fileObj);
            formData.append("path","store");
            $.ajax({
                url:"http://shop.superstar520.com/api/v1/common/uploadImg",
                type:"post",
                data:formData,
                async:false,
                processData : false,
                contentType : false,
                success:function(data){ 
                      if(data.code==200){
                        $("#img"+index).attr('src',data.data.url);
                      }else{
                        toast(data.data.message)
                      }
                }
            });
        } 
    }
    // 第二种上传方法
    function upLoad(index){
        var fileInput = document.getElementById("upimg"+index);
        var file = fileInput.files[0];
        console.log(file.name)
        //创建读取文件的对象
        var reader = new FileReader();         
        //创建文件读取相关的变量
        var imgFile;         
        //为文件读取成功设置事件
        reader.onload=function(e) {
            // alert('文件读取完成');
            console.log(e)
            imgFile = e.target.result;
            // console.log(imgFile);
            $("#img"+index).attr('src',imgFile);
            $.ajax({
                url:"http://shop.superstar520.com/api/v1/common/uploadImg",
                type:"post",
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                data:{
                    "file":file.name,
                    "path":'store'
                },
                success:function(data){
                      console.log(data)
                }
            });
        };
    
        //正式读取文件
        reader.readAsDataURL(file);
    }

     注:toast 是封装的一个弱提示

  • 相关阅读:
    quick-cocos2d-x游戏开发【5】——创建菜单
    cocos2d-x3.0 lua学习(一个)
    hdu 3001 Travelling (TSP问题 )
    朱重组成功,?(行家都知道,几乎回答)
    无人机DLG生产作业流程
    自己定制个人无人机需要的准备工作的内容
    C# 多线程网络爬虫
    [转] c#中 多线程访问winform控件
    C# WinForm中 让控件全屏显示的实现代码
    5.数据绑定和表单标签库
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/10619116.html
Copyright © 2020-2023  润新知