没有合适的资源?快使用搜索试试~ 我知道了~
主要介绍了Ajax上传图片的本质的相关资料,需要的朋友可以参考下
资源推荐
资源详情
资源评论
Ajax上传图片的本质上传图片的本质
主要介绍了Ajax上传图片的本质的相关资料,需要的朋友可以参考下
1.图片上传到服务器。
2.后台将图片地址传到html页面,以图片形式展现。
3.后天将图片地址加入到input表单中,表单处于隐藏状态。
4.前端删除图片,通过js操作,移除图片与表单数据。
5.图片上传表单,是单独的。不能嵌套在总的表单中。
6.牛逼的图片上传,可以对图片进行处理。压缩,加水印等。
7.点击btn,触发图片点击,图片改变之后,触发图片表单提交。
点击按钮点击按钮
<div id="up_status" style="display:none">[站外图片上传中……(2)]</div>
<div id="up_btn" class="carousel-btn">
<span>添加图片</span>
</div>
<div id="carousel-preview"></div>
上传表单上传表单
<form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::U('Goods/carouselUpload')}">
<input id="carousel-photoimg" type="file" name="photoimg">
</form>
触发事件触发事件
$("#up_btn").click(function () {
$("#carousel-photoimg").click();
});
$('#carousel-photoimg').on('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#carousel-preview',
beforeSubmit:function(){ // 提交前,用加载的图片显示
status.show();
btn.hide();
},
success:function(){ // 提交后,加载的图片显示
status.hide();
btn.show();
},
error:function(){
status.hide();
btn.show();
} }).submit();
});
后端验证与处理后端验证与处理
function carouselUpload() {
$path = "Uploads/Store/goods/".date("Ymd").'/';
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
$extArr = array("jpg", "png", "gif","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(empty($name)){
echo '请选择要上传的图片';
exit;
}
$ext = $this->extend($name);
if(!in_array($ext,$extArr)){
资源评论
weixin_38529951
- 粉丝: 6
- 资源: 882
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 微信自动抢红包APP.zip
- 微信抢红包神器-红包鸟(可以抢多种情况下的红包,支持手机息屏抢红包、屏蔽群抢红包).zip
- 微信抢红包,支持xposed与免root,xposed支持最新版,免root需自己实现.zip
- 一维卷积神经网络英语电影评论情感分类项目功能实现-Embedding层
- 微信 自动抢红包 插件外挂(Android),实现了监控通知栏,自动点击红包等功能,帮助大家快速抢到红包.zip
- 满满的干货:分享二十个Python学习资源材料.zip
- USD ISO14229-1-2013 中文版
- STM32单片机FPGA毕设电路原理论文报告模糊控制器在无线监控机群系统中的应用
- OpenWrt-Toolchain-ipq
- STM32单片机FPGA毕设电路原理论文报告模糊控制逆变弧焊电源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功