jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)

时间:2023-12-23 15:27:20

在web开发中,最纠结的一项就是文件上传,最近由于项目需要前后摸索了四天在这里分享给大家。如有不足,望指出!!

前台:jquery、easyui、html

后台:thinkphp

主要涉及语言:jquery,php

效果图如下:

jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)

及时上传主要思想:

在一个隐藏的div层中嵌入(iframe)上传页面,然后在单机照片框的时候,调用js文件中的函数,显示隐藏层(我这里用的是一个easyui的dialog控件),在嵌入的子页面的上传控件(file控件)上绑定一个change事件,并将自身作为参数传递过去( <input id="file_upload" name="file_upload" type="file" multiple="true" onchange="parent.changeImg(this)"/>)在函数中验证其符不符合规则(类型,大小);jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)

提交后反馈文件的保持路径

jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)

具体js中的验证以及动态加载图片

jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)

jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)

这三个函数分别是验证,判断,和后台php回调,动态显示图片的功能,基本的思想就是这样,主要代码也再上面,相比较一些异步上传的插件,有点投机取巧的样子。但是我主要想说的是对自己要有信心,当我做这个功能的时候也感觉非常困惑,但是只要你能向到,一般就能做到,别人能实现的,咱们就可以实现。希望可以对大家有所帮助,同时有不足之处,或者好的办法也希望能与大家沟通整体效果如下:

jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览(模拟异步上传)