HTML代码:
<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代码:
<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下,图片名随机