• FileReader实现图片预览,并上传(js代码)


    var rFilter = /^(image/bmp|image/gif|image/jpeg|image/png|image/tiff)$/i; //控制格式

    var iMaxFilesize = 2097152; //控制大小2M

    function preview(file) {

      var reader = new FileReader();

      if (!rFilter.test(file.type)) {

      alert("文件格式必须为图片");

        return;

      }

      if (file.size > iMaxFilesize) {

        alert("图片大小不能超过2M");

        return;

      }

      reader.onload = function(e) {

        //图片的base64格式,可以直接当成img的src属性

        var $img = $('<img>').attr("src", e.target.result);

        $(".preview").append($img);

        //使用FormData的最大优点就是我们可以异步上传一个二进制文件,在此用来上传图片

        var formdata = new FormData();//创建一个formdata对象

        //通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾具体可看https://segmentfault.com/a/1190000006716454
        formdata.append("image",file.files[0]);
       $.ajax({
        url: "/s/api?cmd=Image.add&tip=video_banner",
        type:"POST",
        cache:false,
        data:formdata,
        processData:false, // 告诉jQuery不要去处理发送的数据
        contentType:false, // 告诉jQuery不要去设置Content-Type请求头
        success:function(data){
        sign = data.res.sign;
        }
       });

      };

      reader.readAsDataURL(file);

    }

      $('[type=file]').change(function(e) {

        var file = e.target.files[0];

        preview(file);

      });

  • 相关阅读:
    HTML5程序设计web workers API 学习笔记
    HTML5 拖拽API 学习笔记
    2013.03.23这天的一点感触和计划
    localStorage实现返回到原位置以及pjax的反思
    HTML5 localStorage浅谈
    javascript学习之函数对象简介
    display:-webkit-box
    由登录表单的用户体验细节说开
    前端和用户体验
    Laravel实践step1,一个简单的crud
  • 原文地址:https://www.cnblogs.com/tkpn/p/6524789.html
Copyright © 2020-2023  润新知