图片文件上传技术分享 By ZoomLa!CMS

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下，图片名随机