图片文件上传技术分享 By ZoomLa!CMS
来源:互联网 发布:io域名是哪里 编辑:程序博客网 时间:2024/06/05 16:39
HTML代码:
<input style="display:none;" type="file" id="pic_up" accept="image/jpg,image/png,image/jpeg" onchange="upload();"/><input type="text" id="PicUrl_T" class="form-control m715-50 monitor" placeholder="http://demo.z01.com/pic.jpg" readonly /><input type="button" class="btn btn-info" value="上传图片" onclick="sel();" />
1、使用表单中的文件域(<input type="file".../>)控件可以上传文件
2、这里定义一个文件域(<input type="file".../>),根据自己页面的样式自定义界面样式,如图:
此处我选择隐藏文件域,自定义一个输入框及按钮
引用JS代码:
<script src="/JS/Controls/ZL_Webup.js"></script>
3、引用逐浪CMS的上传js文件
页面操作JS代码:
<script>//------上传图片function sel() { $("#pic_up").val(""); $("#pic_up").click();}function upload() { var fname = $("#pic_up").val(); //例如从本地选择一个名为1.jpg if (!SFileUP.isWebImg(fname)) { alert("请选择图片文件"); return false; } //判断上传文件是否是图片 SFileUP.AjaxUpFile("pic_up", function (data) { $("#PicUrl_T").val(data); //上传成功后的完整路径显示在输入框内,如/UploadFiles/User/user/admin1/20171122E3GADb.jpg });}</script>
4、点击按钮激活sel()方法,相当于点击<input type="file">这个隐藏域按钮,激发上传功能
5、upload( )方法中,var fname=$("#pic_up").val(); 获取隐藏表单上传的图片名
6、其中upload()中if中判断上传文件类型,若上传的是非图片,其他类型文件,则返回false,并提示用户上传一张图片
7、其中 $("#PicUrl_T").val(data)为图片上传成功后,则在文本框中显示完整路径,
图片保存在根目录UploadFiles/User/user/admin1下,图片名随机
阅读全文
0 0
- 图片文件上传技术分享 By ZoomLa!CMS
- zoomla!逐浪CMS与您分享六种asp.net 如何防范SQL注入攻击技术
- 【原创技术分享】Exponent-cms任意文件上传漏洞分析 (cve-2016-7095)
- 分享来自zoomla!逐浪CMS的.net十个优势
- 分享来自zoomla!逐浪CMS的三个ASP.NET实用技巧
- 分享来自zoomla!逐浪CMS的ASP.NET学习全过程
- zoomla!逐浪CMS分享php与.Net的比较
- 与您分享来自zoomla!逐浪CMS的67个行业建站方案
- zoomla!逐浪CMS与您分享影响网页排名的几个要素
- 与您分享zoomla!逐浪CMS的做网站优化的八个常见问题
- 分享来自zoomla!逐浪CMS的在.Net开发中五个重要的认识误区
- 分享来自zoomla!逐浪CMS的五种常见的ASP.NET安全缺陷
- 分享来自zoomla!逐浪CMS的将sql2005的数据库导入到sql2000的方法
- 与您分享来自zoomla!逐浪CMS的Web导航设计—面包屑的由来
- 分享来自zoomla!逐浪CMS的对mssql性能优化的七点认识
- iOS分享 - AFNetworking之多图片/文件上传
- iOS分享 - AFNetworking之多图片/文件上传
- iOS分享 - AFNetworking之多图片/文件上传
- 史上最完整的人工智能书单大全,学习AI的请收藏好
- 恐惧、野心和迷茫,机器人公民背后的未来世界
- 基于大数据学习算法的优惠券预测模型
- MySQL高可用架构之MHA
- Linux—压缩解压缩命令
- 图片文件上传技术分享 By ZoomLa!CMS
- 2017年中国人工智能产业最全研究报告发布 | AI世界2018年八大趋势
- mac安装LightGBM with Anaconda
- DEF盘全部不见怎么恢复
- django与vue开发中跨域请求问题
- JSON.stringify格式化Json字符串
- 链接文件
- QT选择目录等常用文件/文件夹操作
- 面试题整理--struts2与springmvc区别