`

jquery.filedrop插件的使用,拖动图片上传

阅读更多

此插件需要浏览器支持HTML5,所以IE可能不大支持。
插件使用很简单
<div id="dropbox">
<span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
</div>
这是静态页的重点处。
开心网,点点网等许多网站都会有拖动本地图片就能上传的功能,大部分是在其swfupload.swf外套上dropbox层。
在script.js中修改url: 'post_file.php',指定执行图片上传的程序,
在post_file.php中修改$upload_dir = 'uploads/';指定图片上传的路径。

 

分享到:
评论

相关推荐

    jquery-filedrop:jQuery插件-将桌面文件和POST拖放到URL以处理文件

    jQuery Filedrop插件HTML5将桌面文件拖到浏览器中jQuery filedrop使用HTML5 File API允许用户将多个文件从桌面拖到浏览器,并将每个文件上载到用户指定的URL。 filedrop使用HTML5 FileReader()读取文件数据。...

    FileDrop.zip

    拖拽式上传,包括demo js ,有需要的可以下载

    C# 文件拖拽和pixturBox缩放与拖拽功能

    文件拖拽:  效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了。  将一个控件的属性AllowDrop设置为true,然后添加DragDrop、DragEnter时间处理...

    FileDrop:用于拖放和AJAX(多)文件上传的自包含跨浏览器纯JavaScript类

    修改FileDrop独立的跨浏览器HTML5,旧版,AJAX,拖放JavaScript文件上传FileDrop是一种轻量级JavaScript类,用于易于使用的文件上传,可以直接使用,甚至支持大多数旧版浏览器。 [| ]特征跨浏览器–支持Firefox 3.6...

    PYTHON写的文件比较

    self.fileDrop = FileDrop(self.m_textCtrl3) self.m_textCtrl3.SetDropTarget(self.fileDrop) bSizer8.Add( self.m_textCtrl3, 1, wx.ALL, 5 ) bSizer7.Add( bSizer8, 0, wx.EXPAND, 5 ) bSizer9 = wx....

    .NET WinFrom中给文本框添加拖放事件的代码

    在开发.NET WinForm程序时,有... 给文本框添加DragEnter事件 代码如下: private void textBox1_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataFormats.FileDrop, false)) { e.Effect

    winform实现拖动文件到窗体上的方法

    本文实例讲述了winform实现拖动文件到窗体上的方法。分享给大家供大家参考。具体如下: private void Form5_Load(object sender, EventArgs e) { this.AllowDrop=true; } private void Form5_DragEnter(object ...

    FileDrop-开源

    FileDrop-具有进度条和病毒检查的多用户上传/下载文件共享Web应用程序。 基于Web的文件管理器/ ftp站点。 允许您通过Internet或Intranet管理和/或共享文件。

    fileDrop-开源

    客户端到企业设置的基于Web的ftp界面

    comodo lesk tests (clt) v1.1.0.3

    8. Invasion: FileDrop 9. Invasion: DebugControl 10. Injection: SetWinEventHook 11. Injection: SetWindowsHookEx 12. Injection: SetThreadContext 13. Injection: Services 14. Injection: ...

    extension-filedrop:该扩展提供了一个统一的,易于使用的界面来处理文件到Defold应用程序的拖放

    FileDrop API用于折叠该扩展提供了一个统一的,易于使用的界面来处理将文件拖放到Defold应用程序上的操作。 该扩展程序当前仅通过支持HTML5。 要在Defold项目中使用此库,请将以下URL添加到game.project依赖项中: ...

    simple-filedrop

    simple-filedrop 配置 el 投放区域元素,jQuery 对象,class, id types :Array 允许投放的文件格式, 为字符串数组(Array), 比如 [image/png, image/jpeg] hints :String 投放区域的提示文字。 事件 fileDropShown ...

    filedrop-web::mobile_phone_with_arrow:WebRTC文件传输-ReactTypeScript前端

    然后,您需要克隆该项目,将其指向WebSockets后端(filedrop-ws)(在.env.local中),进行构建并将其放置在某些静态文件服务器上(我使用nginx)。 我还使用nginx通过它代理后端。 环境变量在构建过程中使用以下...

    filedrop-ws:RT WebRTC文件传输-WebSockets服务器

    filedrop-ws 用于WebSockets服务器。 存储库中提供了有关该项目的更多详细信息。 自托管 请参阅自述文件中的“部分。 安装 运行yarn install , yarn build ,然后简单地运行yarn start 。 为了进行开发,您还可以...

    File-Drop:即插即用的 JavaScript 拖放文件上传器小部件

    File-Drop 确实依赖于 jQuery,但除此之外,它是自包含的。 PHP 后端有些缺乏,因为它最初部署在 Rails 服务器上。 有关如何创建和启动 FileDrop 的示例,请参见 test.html。 最初基于此 SitePoint 教程: : ...

    simplefiledrop:轻量级Docker容器,用于托管文件

    如果您使用的是Google云端硬盘,请将其放置在任何地方,更改共享设置以允许具有URL的任何人查看,并获取“下载”文件时使用的链接。 现在,您可以运行它。 该图像存储在公共注册表中,应该会被自动拉出。 docker ...

    FileDrop:基于 HTTP 的分布式文件系统

    在后端使用分布式文件系统进行文件管理的 Web 服务。 要快速入门,请参阅快速入门 该项目有两个组件,namenode 和 datanode,它们应该作为单独的进程在同一台机器或不同的机器上运行。 如果在同一台机器上运行,请...

    uPPP v0.5 Ultimate by UFO-Pu55y

    Features: ========= -Use of PNG images with multiple levels of transparency -Supports 4 types of patches: offset, search pattern, registry, filedrop -(Sine-)Scroller instead of ...

    RT WebRTC文件传输-WebSockets服务器。-Node.js开发

    filedrop-ws用于filedrop-web的WebSockets服务器。 filedrop-web存储库中提供了有关该项目的更多详细信息。 安装运行纱线安装,建立纱线,然后简单地运行纱线启动。 用于开发y filedrop-ws用于filedrop-web的...

Global site tag (gtag.js) - Google Analytics