• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
LDLX@Y火星
博客园    首页    新随笔    联系   管理    订阅  订阅

上传文件的两种方式

 由于我的页面有多个上传文件的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 是封装的一个弱提示

posted @ 2019-03-29 09:05  火星黑洞  阅读(207)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3