JavaScript中上传文件为图片如何读取(UI组件之图片剪裁器)

//获取上传的文件/图片
function getFile(){
    var files,len;
    var reader = new FileReader();
    var img_type;
    addEvent(selectFile,‘change‘,function(){
        files = this.files;//selectFile为上传文件表单,this.files获取选择的文件
        len = files.length;
        if(len > 0){
            img_type = files[0].type;
            if(/image/.test(img_type)){
                reader.readAsDataURL(files[0]);//读取文件并将文件以数据URL的形式保存在result中
                var img = new Image();
                reader.onload = function(){
                    img.src = reader.result;
                    context.drawImage(img,0,0,width,height);
                }
            }else{
                console.log(‘选择的不是图片‘);
            }
        }else{

            alert(‘未选择文件‘);
        }
    })
}
时间: 2024-12-20 16:29:19

JavaScript中上传文件为图片如何读取(UI组件之图片剪裁器)的相关文章

微信网页中上传文件时“只能选择SD卡中的文件”问题

需求描述:在微信网页中上传文件到我们自己的服务器,使用 input  type=file标准控件: <input type="file" name="upfile" id="upfile" > 问题来了:苹果可以顺利上传图片文件的,安卓下每次选择完图片文件之后会弹出提示"只能选择SD卡中的文件"不能上传图片.手机已经设置默认存储为SD卡. 百度搜了一个下午没有结果,微信公众平台更没有答案shiiiit. 最后在cs

Mac/Linux/Centos终端中上传文件到Linux云服务器

Mac/Linux/Centos终端中上传文件到Linux云服务器 1.mac上传文件到Linux服务器 scp 文件名 用户名@服务器ip:目标路径如:scp /Users/test/testFile [email protected]:/test/ 2.mac上传文件夹到Linux服务器,与上传文件相比多加了-r scp -r 文件夹目录 用户名@服务器ip:目标路径 如:scp -r /Users/test/testFolder [email protected]:/test/ 3.Lin

上传文件 从相机、图库获取与截取图片

Activity /**实际开发涉及文件上传.下载都不会自己写这些代码,一般会集成第三方库来完成,比如android-async-http,okhttp,xUtils等*/ public class UploadFileActivity extends ListActivity {     private ImageView imageView;     private TextView tv_info;     public static final int uid = 10415362;  

ASP.Net中上传文件的几种方法

在做Web项目时,上传文件是经常会碰到的需求.ASP.Net的WebForm开发模式中,封装了FileUpload控件,可以方便的进行文件上传操作.但有时,你可能不希望使用ASP.Net中的服务器控件,仅仅使用Input标签来实现文件上传.当然也是可以的.下面总结在项目中使用过的上传文件的方式. 一.使用Asp.Net中的FileUpload服务器端控件实现上传 使用asp.net中的服务器端控件FileUpload上传文件非常方便.FileUpload对上传操作进行了封装,你只需要调用Save

谈谈php中上传文件的处理

这是一个表单的时代... 我们在浏览器中编辑自己的信息,会遇到上传头像:在文库中,我们会上传文档......到处存在“上传”这个词. php是最好的语言(其他语言的程序猿们不要打我...).php在处理交互方面有天然的优势,自然有强大的函数来处理上传文件. 和提交一般的数据一样,上传文件也需要表单.下面建立一个特殊的表单来上传文件. 1 <form enctype="multipart/form-data" action="upload_file.php" n

thinkphp5中上传文件自定义命名规则

在thinkphp5中:有上传文件一章: https://www.kancloud.cn/manual/thinkphp5/155159 如果对于文件上传这一章,不了解,就先看下面的,再来看这一段. 下面我们自定义两个规则. 1.datea规则,年月/时分秒.(3位随机数) /201706/164030789 2.ymmd5规则,年/月/md5 修改框架文件:thinkphp/library/think/File.php. 增加两个case: case 'datea': case 'ymmd5'

【解决】AWS服务控制台中上传文件失败

使用IE 11,在 AWS Services Console 中不管是 S3 还是 Elastic Beanstalk 的页面中上传页面都会失败,提示信息如下: A problem occurred while uploading to S3. 但是在 Chome 中则没有此问题. 此问题的原因判断非常离散,而且有时候同样的操作并不一定能复现.经过反复的尝试,可能与如下两方面原因有问题: 1. IE 设置 在 IE 的 “Internet 选项 > 安全 > Internet > 自定义

Java中上传文件和表单数据提交如何保持数据的一致性?

学生申请学科竞赛活动,表单中有学科竞赛的申报信息和部分附件,需要做到将上传文件和表单数据提交保持一致性. 将上传文件和插入表单数据放到事务汇总去处理,由于表单的数据我们可以控制,但是上传的文档不好控制.一方面我就把表单数据提交放置在文件上传前面,这样当表单数据提交发生异常我们可以回滚,文件并未上传,当文件上传发生异常时,我们可以回滚数据库的数据,只有当文件正常上传时我们才提交数据库数据... ----------------------------------------------------

django中上传文件的三种方式

前端代码: <style> .upload{ display: inline-block;padding: 10px; background-color: brown; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 90; } .file{ width: 100px;height: 50px;opacity: 0; position: absolute; top: 0; bottom: 0; right: