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

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