精华内容
下载资源
问答
  • 主要介绍了JS文件/图片电脑里面拖拽到浏览器上传文件/图片,需要的朋友可以参考下
  • 1.效果展示   2.html 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...script src=
    1.效果展示

     

    2.html 代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./upload.js"></script>
        <style>
            #drop img{width: 100px;height: 100px;margin: 10px;}
        </style>
    </head>
    <body οnlοad="test()">
        <div id="drop" style="width: 500px;height: 400px;background: #eee;margin: 0 auto;">
            <div style="clear: both;"></div>
        </div>
        <p style="text-align: center"><button οnclick="up()">提交</button></p>
    
    </body>
    </html>
    

      

    3.引入js

    js地址 :http://files.cnblogs.com/files/jiebba/upload.js

     

    4.引用插件
       var formData = new FormData(),list={}
            function test() {
                var d = new DragUpLoads()
                d.getDragImage({id:'drop',dropCallback:function (data) {
                    if(list[data.name]) return;
                    list[data.name] = true
                    formData.append("files", data.blob);
                    formData.append("asdfas", 'asdfasdf');
                    document.getElementById('drop').appendChild(data.img)
                    /*
                    * 返回img对象,url ,blob对象
                    * */
                }})
            }
            function up() {
                console.log(formData)
               /*
               * formData  这个对象即我们要传的值
               * 通过 异步post/get 给后台即可
               * */
            }
    

      

    代码仅供参考,具体功能可以自己扩展。

    个人博客 :很多好用的 npm 包 , 可以看看  https://gilea.cn/ 

    http://www.cnblogs.com/jiebba    我的博客,来看吧!

    github:  https://github.com/longfei59418888/vui   (很不错的vue2.0组件库,记得给一个 start,以后有一起讨论,各种好组件)

     

    展开全文
  • Chrome可以从其它浏览器上拖拽图片

    千次阅读 2013-07-25 16:43:44
    chrome永远都是走技术前线,总会有些惊人的表现,最近我做一个拖拽上传图片功能时发现Chrome竟然可以直接从其它浏览器上拖拽图片。 普通拖拽事件,各个浏览器都识别从本地磁盘拖拽的文件 HTML5的拖拽drop事件...

    chrome永远都是走在技术前线,总会有些惊人的表现,最近我在做一个拖拽上传图片功能时发现Chrome竟然可以直接从其它浏览器上拖拽图片。

    普通拖拽事件,各个浏览器都识别从本地磁盘拖拽的文件

    HTML5的拖拽drop事件让web应用看到了两点,然而在普通的drop事件里,多数浏览器只支持从本机电脑磁盘上拖拽到浏览器,例如:

    JS代码:

    // 获取要触发drop事件的DIV
    vardu = $('dragUpload');
     
    // 根据ID获取对像
    function$(id){
        returndocument.getElementById(id);
    }
     
    // 把拖拽到网页上的图片显示到页面上
    functiondisplayImage(container,dataURL){
        varimg = document.createElement('img');
        img.src = dataURL;
        container.appendChild(img);
    }
     
    // 拖放释放主要处理函数
    du.addEventListener("drop",function(e){
        e.stopPropagation(); 
        e.preventDefault(); 
        du.className = du.className.replace('drag-over','');
     
        // 获取拖放文件 一个数组
        varfiles = e.dataTransfer.files;  
        handleFiles(files); 
    },false);
    


    
    
    
    

    界面效果:

    我们从电脑磁盘拖拽一张图片到网页中

    无论在FireFox,Chrome,Opera,IE下都一样使用,都可以从电脑上的任意位置拖拽一张图片到网页中。然而Chrome不仅可以从电脑磁盘上拖拽图片,甚至可以识别从其它浏览器中拖拽进来的图片。

    Chrome支持从FireFox ,Safari 中拖拽进来的图片

    从FireFox中拖拽一张图片到Chrome中:

    惊奇吧!

    测试结果:

    从 IE 拖放至 Chrome 无效

    从 Opera 拖放至 Chrome 无效

    从 Safari 拖放至 Chrome 有效

    从 FireFox 拖放至 Chrome 有效

    从 任意浏览器 拖放至 非Chrome 无效

    从 Chrome 拖放至 Chrome 无效

    注意,虽然Chrome可以识别从别的浏览器拖放进来的图片,但不能识别从Chrome拖放进来的图片,如:

    为了更方便看清楚,我们可以向控制台输出消息,正常情况下,我们通过获取每个拖放文件的name属性就可以得知拖放的文件名,如:

    functionhandleFiles(files){
        for(vari = 0; i < files.length; i++) {  
            varfile = files[i];  
            varimageType = /image.*/;  
               
            if(!file.type.match(imageType)) {  
                continue; 
            } 
     
            varreader = newFileReader();  
            reader.onload = function(e){
                displayImage($('bd'),e.target.result);
            }
     
            // 把文件转换为url,图片可以src
            reader.readAsDataURL(file);
     
            // 把文件名打印出来
            console.log(file.name);
        } 
    }
    


    
    
    
    


    获取拖放文件名

    然后我们再来拖放,看看file.name都是什么内容,首先从电脑磁盘上拖放

    file.name就是文件名,包含拓展名。

    从其它网页上向Chrome中拖放(因为从网页上拖放到其它浏览器中不能识别拖放文件,所以只能使用Chrome来测试)

    From FireFox 文件名并不是在服务器上的真实文件名,而是类似临时的文件名。

    From Safari 文件名就是图片在服务器上的真实文件名

    如何识别拖拽的文件是不是图片?

    刚才,我们看到从FireFox拖拽到Chrome中的图片文件名像是一临时文件名,但既然从FireFox拖拽进来的图片是bmp拓展名结尾的,我们如何得到这个文件的类型,获取它的真实拓展名呢?

    首先,就要判断是不是图片类型


    functionhandleFiles(files){
        for(vari = 0; i < files.length; i++) {  
            varfile = files[i];  
            varimageType = /image.*/;  
               
            if(!file.type.match(imageType)) {  
                continue; 
            } 
     
            varreader = newFileReader(); 
            reader.onload = function(e){
                displayImage($('bd'),e.target.result);
            }
     
            // 把文件转换为url,图片可以src
            reader.readAsDataURL(file);
     
            // 把文件名与类型打印出来
            console.log(file.name + " | " + file.type );    
        } 
    }
    
    functionhandleFiles(files){
        for(vari = 0; i < files.length; i++) {  
            varfile = files[i];  
            varimageType = /image.*/;  
               
            if(!file.type.match(imageType)) {  
                continue; 
            } 
     
            varreader = newFileReader(); 
            reader.onload = function(e){
                displayImage($('bd'),e.target.result);
            }
     
            // 把文件转换为url,图片可以src
            reader.readAsDataURL(file);
     
            // 把文件名与类型打印出来
            console.log(file.name + " | " + file.type );    
        } 
    }


    我们可以利用file.type来是不是图片,以及图片的类型

    并且右侧 有一个图片 12,实际上文件名是 12.jpg,把拓展名去掉以后,就拖拽进来就被type识别不出来,而a.jpg实际上是一个html网页,结果type类型却是jpeg,看类通过file.type类型的信息不可信

    DEMO : http://www.qttc.net/static/demo/html5/drop.html

    展开全文
  • 简单的图片任意拖拽效果,任意拖拽到任意位置,代码简单 易懂
  • 现在大家的照片或图片很多,其实在电脑上图片做成视频是非常方便的,还能整理好照片,节省空间,图片/照片视频看起来也更加美观。今天直接用数码大师教大家用电脑图片合成视频,3分钟就能学会的教程,真滴挺简单的...

    电脑图片合成视频怎么做?图片视频制作用什么软件好?现在大家的照片或图片很多,其实在电脑上把图片做成视频是非常方便的,还能整理好照片,节省空间,图片/照片视频看起来也更加美观。今天直接用数码大师教大家用电脑图片合成视频,3分钟就能学会的教程,真滴挺简单的。
    在这里插入图片描述
    看下用数码大师做的图片视频效果:
    在这里插入图片描述在这里插入图片描述

    第一步:把电脑上的图片导入到数码大师里

    点击“添加相片”导入电脑上的图片,按住鼠标左键去拖动照片,可以改变照片的播放顺序,很方便的操作。有小伙伴想给图片加上文字,比如命名或是配上旁白,点击“修改名字/注释/旁边”即可实现。
    在这里插入图片描述
    第二步:给图片加上酷炫的切换转场特效

    为图片加上切换转场效果后,做出来的视频会更加吸睛、美观。数码大师自带有大量的效果,而且自动为所有照片随机运用相片特效,比如卷轴、虫洞、翻页等3D效果。如果想自己DIY个人风格,点击“应用特效到指定相片”运用自己喜欢的效果就行。
    在这里插入图片描述
    第三步:还可以给图片视频配上背景音乐

    加上音乐后的图片视频,更有风格。点击“添加媒体文件”把音乐文件导入到数码大师,背景音乐就能加好了。
    在这里插入图片描述
    第四步:导出高清的电脑图片视频

    数码大师可以支持导出1080P全高清的视频格式,在电脑上观看或在手机上分享给亲朋好友,体验都是不错的。
    在这里插入图片描述
    如果想在图片视频里插入自己的短视频素材也是可以的。点击“相片间插入视频短片”,然后短视频的背景音量和背景音乐的音量,可以各自调节,很方便。
    在这里插入图片描述

    展开全文
  • 解压密码:RJ4587 有些时候,我们需要快速定位被处理过图片与原始图的差异,这有限大小的电脑屏幕是一件很麻烦的事情。这次要给大家介绍一款用纯JavaScript代码编写的图片拖动对比插件,利用它我们可以快速地找...
  • public class DragExampleActivity extends Activity { Bitmap mBitmap; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { sup...
    public class DragExampleActivity extends Activity {
        Bitmap mBitmap;
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
            setContentView(new DragView(this));
        }
        
        @Override
        protected void onDestroy()
        {
            super.onDestroy();
            if(null != mBitmap) {
                mBitmap.recycle();
                mBitmap = null;
            }
        }
     
        private class DragView extends View {
            private int mMotionX = 0;
            private int mMotionY = 0;
            private Paint paint;
            
            public DragView(Context context)
            {
                super(context);
                paint = new Paint();
            }
     
            @Override
            public void draw(Canvas canvas)
            {
                super.draw(canvas);
                canvas.drawBitmap(mBitmap, mMotionX, mMotionY, paint);
            }
     
            @Override
            public boolean onTouchEvent(MotionEvent ev)
            {
                if(ev.getAction() == MotionEvent.ACTION_DOWN)
                {
                    mMotionX = (int) ev.getX();
                    mMotionY = (int) ev.getY();
                    invalidate();
                    return true;
                }else {
                    return super.onTouchEvent(ev);
                }
            }
        }
    }
    展开全文
  • 浏览器中禁止拖动页面的元素或者图片打开打开窗口
  • 只需通过拖拽,即可PC和手机间双向快速互传图片、文件和文本内容。文件大小不受限制,速度也很快。文本编辑时,可以将本地图片拖拽到对方正在编辑的文档。编辑完毕,文件拖拽到对方设备。传输文件时,无需手机PC...
  • qtl例程12.1拖拽显示为图片.7z
  • 不知从何时开始,微信原本图片直接拖拽就能实现的复制现在行不通的。我也记不得是哪个版本了。 现在微信聊天记录中发的图片或者动图右键都没有复制功能,拖拽也行不通。   解决办法 找到微信的图片存储路径 ...
  • uploader,今天我们将开发一个简单的叫uploadcenter的图片上传程序,允许用户使用拖拽方式来上传电脑上图片,使用现在浏览器支持新的HTML5 API。图片将会有一个预览和进度条,都由客户端控制。目前,图片都保存...
  • HTML5拖动条实现图片滚动浏览效果,当运行本效果后,拖动底部的滚动条即可控制上面的图片滑动起来,可浏览到每一张图片,采用最新的HTML5移动设备技术,效果不错,本代码面向移动设备开发,在电脑上浏览需要Chrome或...
  • 电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件,通过鼠标拖动或触屏滑动填充拼图来进行安全验证。
  • cocos creator 网页获取电脑本地图片并显示,非android ios 平台。
  • 电脑桌面怎么放照片?照片,指用感光纸放在照相底片下曝光后经显影、定影而成的人或物的图片。下面就由学习啦小编来给大家说说电脑桌面怎么放照片吧,欢迎大家前来阅读!电脑桌面怎么放照片一、首先要下载这个...
  • 可用于图片和PDF中文字的识别提取中,电脑一切看得见的文件都可以识别,支持10国语言。 软件地址:https://pan.baidu.com/s/1RryLbtc7RvdlvzuQ0Q_FUw 提取码:qkpp 一段日语文字识别吧,具体效果自己下软件去验....
  • 动态的GIF图怎么在电脑上制作

    千次阅读 2019-06-10 13:57:56
    那动态的GIF图怎么在电脑上制作呢? 1、现在网上的gif制作软件可谓是堆积如山,今天要说的是一个相对比较专业的GIF制作工具,功能是比较齐全的,操作简单; 2、打开直接双击运行迅捷GIF制作工具,有...
  • 要说到修改一张图片的尺寸大小,很多人的第一反应通常是打开 Photoshop 或者 Pixelmator,其实使用苹果MAC电脑有更简单方便的方法来调整图片的大小尺寸,OS X 自带的快速预览功能就可以实现快速修改图片尺寸,下面跟...
  • 电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件,通过鼠标拖动或触屏滑动填充拼图来进行安全验证,点击刷新可以更换当前待验证的图片。 HTML & css: <!DOCTYPE html> <html lang="zh"> <...
  • 电脑知识 如何提取图片中的文字

    万次阅读 2014-12-28 15:45:51
    方法一: ABBYY_FineReader_11.102.519 破解版 这个是目前中文识别率...硬件: 电脑一台 数码相机  软件: word2010(其它的版本我没有实验)  doPDF (百度可以搜索下载,是一款免费的PDF制作软件)  
  • 最近很多学生学习我的PS课程的时候经常会问了我这样的问题,一个是win10系统打不开ps了,还有就是Windows10安装PS软件后无法直接拖动图片到ps里面,只能打开PS软件后,点击 文件---打开 进行图片的载入。
  • 微信小程序开发图片拖拽

    千次阅读 2017-05-05 10:16:40
    //往移动:y拖拽值大于等于当前的值,说明已经到边上了,就等于拖拽值,否则当前的值加上鼠标拖拽的距离 if(-endy==h_y||-endy>h_y){ y=-h_y; console.log("da0") }else{ y=endy+DistanceY; ...
  • 微信电脑客户端不能直接拖拽发送文件 某次Windows自动更新升级后,微信发送文件不能直接拖拽发送了,解决方法 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Current...
  • 1、右击你要修改的图片,然后选择打开方式,然后选择画图2、按住键盘的“ctrl”+鼠标的滑轮(或者拖动右下角的条),调整图片的观察大小。3、调整好合适的图片大小后的结果,注意:此次调的大小是适...
  • 实现图片拖拽功能(1)

    千次阅读 多人点赞 2020-02-24 20:31:40
    实现图片拖拽功能就好像电脑桌面的软件图标可以跟随鼠标改变位置一样 这里我用一个div块来代表图片 首先讲一下实现的原理 首先确定div块被鼠标点击,即是鼠标按下 使用onmousedown()函数 其次当鼠标被按下之后...
  • 我们向您展示了如何Mac轻松裁剪图片,以便您可以执行此简单的编辑任务。 您可以使用各种照片编辑应用程序Mac裁剪照片。首先,您需要做的就是将图片拖放到要使用的应用程序中,然后按照以下说明进行裁剪。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,028
精华内容 16,411
关键字:

在电脑上如何拖动图片