HTML5图片上传(支持多图片)

查看演示立即下载

插件描述：FileReader浏览 FmData上传至后台

更新时间：2019/2/10 下午4:07:57

更新说明：

test.js:

1. 删除一些没用的参数和方法

2. 更新提交上传方法重建文件方法实现起来更简单了

PS:PHP环境下上传图片后开启调试模式NETWORK打开之后按提交就可以看到文件的参数了

这里就提供这一种思路: 用$_FILES里的name和上传上来的$_POST OR $_GET 中的某参数建立索引就可以想办法把数据和图片绑定起来了

1.写在头上~样式从这位大大参考了一下

/

仅参考样式既然这位大大没有要求JQ币我也直接~ 后端程序猿一枚请各位前端大大轻喷 Orz

2.因为从这位大大这里下载的插件并不符合我这里的业务需求所以干脆自己写了一个由于上头说不要让服务器有太多的废文件所以采用了FileReader的机制

3.如果有任何建议直接在评论留言就好啦~本机只有IE11,火狐,谷歌测试是可以兼容的低版本如果不支持FileReader是不可以使用的

1. 本地使用的JQ包是 jquery-3.3.1.min.js 低版本应该也可以兼容导入它~

2. 导入样式文件 index.css

3. 导入js文件 fileInput.js 这个就是核心文件啦

4. 导入js文件 test.js 这个是利用formData发送文件到后台的测试JS文件仿造我这里的业务需求的可以参考

5. 按道理来说这里就可以直接在你的button上放触发方法了

1	`onclick="up_files($(this))"`

选择器对象一定要带哦~

这里是我后端测试的时候发现的一点问题这样写确实可以降低废文件的冗余问题了也可以把文件传到后台

但是我这个逻辑文件的索引又是一大问题所以我在test.js中有写改掉file的name但是后来问度娘说是file是只读的所以要new一个新的对象才能重写文件名就比较麻烦

这里是PHP作为后台获取文件数据的

用$_FILES获取的话只有五个基本属性

我在上传的每个文件里都有定义新属性

但是无奈它PHP抓不到

console.log已经封装成p 可以直接调用了

有问题或者建议的小伙伴和大佬们可以直接在评论留言~ 共同勉励~

注意：导入如果发现跟原项目有层级覆盖的情况可以在index.css文件中调整z-index层级关系

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com