HTML代码:
复制代码
1
2
3<input style="display:none;" type="file" id="pic_up" accept="image/jpg,image/png,image/jpeg" οnchange="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="上传图片" οnclick="sel();" />
1、使用表单中的文件域(<input type="file".../>)控件可以上传文件
2、这里定义一个文件域(<input type="file".../>),根据自己页面的样式自定义界面样式,如图:
此处我选择隐藏文件域,自定义一个输入框及按钮
引用JS代码:
复制代码
1<script src="/JS/Controls/ZL_Webup.js"></script>
3、引用逐浪CMS的上传js文件
页面操作JS代码:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14<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下,图片名随机
最后
以上就是清爽宝马最近收集整理的关于图片文件上传技术分享 By ZoomLa!CMS的全部内容,更多相关图片文件上传技术分享内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复