PHP与JavaScript协作实现图片批量上传

5星 · 超过95%的资源 需积分: 9 118 下载量 182 浏览量 更新于2024-09-21 收藏 51KB DOC 举报
在本文档中,我们将探讨如何使用PHP和JavaScript结合实现批量上传图片的功能。首先,我们通过创建一个HTML页面(upload.html)来构建用户界面。该页面包含以下几个关键组件: 1. **HTML结构**: - 页面开始定义了XML命名空间和字符编码 `<html xmlns="http://www.w3.org/1999/xhtml">` 和 `<head>`部分,其中设置了`<meta>`标签以指定内容类型为UTF-8。 - `<title>`标签未给出具体标题,但表明这将用于显示上传文件的管理界面。 2. **JavaScript功能**: - **upload()函数**:当用户点击上传按钮时,这个函数会被调用。它首先显示两个遮罩层,然后遍历页面中的IFrame元素,并设置它们的`src`属性为处理上传的后台脚本`funs/up.php`,其中传递一个`label`参数表示当前操作关联的图片组ID。 - **delpic()函数**:用于删除已选择的图片,当用户点击删除图标时,它会从含有图片信息的DOM元素集合中移除相应的`span`元素,从而从列表中移除图片。 - **create()函数**:此函数负责动态创建新的上传区域,包括输入框用于填写图片名称和URL。当用户需要添加新图片时,它会创建一个新的`<span>`元素并添加到页面上。 3. **上传逻辑**: - 在`up.php`后端脚本中,PHP将处理实际的文件上传过程,包括接收前端传递的图片信息(如名称、URL),验证文件类型、大小等,并可能存储文件在服务器上。此外,它还应返回成功或失败的状态信息,以便前端更新显示。 4. **用户交互**: - 用户可以通过输入框输入图片的名称和URL,然后点击上传按钮触发`upload()`函数,实现批量上传。删除功能允许用户随时从已上传的列表中移除不想要的图片。 5. **注意事项**: - 考虑到安全性,上传过程中应进行文件类型检查、大小限制以及防止SQL注入等攻击。此外,为了保护用户隐私,应该对上传的图片URL进行验证,确保其安全性和合规性。 这篇文档提供了一个基础框架,用于在PHP和JavaScript的协同下实现批量上传图片的功能。开发者可以根据实际需求扩展或优化这个示例,例如添加文件预览、进度条显示、错误处理等功能。
2014-07-08 上传
代码来源:http://xxling.com/blog/article/75.aspx 我只是将其代码中asp实例改成了php,转载及使用必须注明原作者。 请遵循原作者开放分享的方式,请勿用来赚取积分!!! 代码做的非常简单,只是用于演示,没有加入任何过滤函数。请务必修改(加入过滤函数)后使用,【坚决不能】直接用于网站!! 之前没怎么接触过js,也是随手做一个。如果不满意请各位多包含,毕竟我不是骗分,也请您高抬贵手。 目前网上看到最好的一个HTML5批量上传程序,它使用纯html+js进行批量上传,不需要flash、jquery等额外组件,大小只有10KB左右。 主要是我想研究一下html5批量上传,但发现纯html5在php中会出现超时、没有进度等问题,于是这网上找了一圈。发现目前的代码,要不就是传统的flash,要不就是调用臃肿的jquery,要不就是代码动辄几百K,根本没法分析。而且CSDN上资源骗分居多,找了一圈花了几十分,还是没下载到一个真正满意的代码。 于是根据这位博主的分享,把原程序精简,并改为了php脚本。因为我php也是初学,之前一直出现只上传1个文件的问题。后来发现是由于定义秒为文件名,本地速度过快将前面的函数覆盖了。多亏了php的sleep,才将这个问题解决。 于是这个简单的批量上传组件就这样做好了,欢迎各位测试和修改。 最后再次提醒各位务必牢记原作者xiaolingzi和其博客地址地址: http://xxling.com/blog/article/75.aspx 转载请注明原作者,修改和使用也不要去掉js的作者标记。 毕竟那标记就一行,人家写个程序很不容易,请各位尊重作者的劳动。谢谢各位配合!