图片文件上传技术分享 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下，图片名随机

这个方法很好，选用之

这里还有一个多图上传控件（支持传入互动）方法 ：

<div class="container">
<input type="button" id="upfile_btn" class="abd" value="+上传图片" />
<div id="uploader" class="uploader" style="margin-top:5px;"><ul class="filelist"></ul></div>
<input type="hidden" id="zxtp" name="zxtp" />
</div>
<link href="/JS/Controls/ZL_Webup.css" rel="stylesheet" />
<script src="/JS/ICMS/ZL_Common.js"></script>
<script src="/JS/Controls/ZL_Dialog.js"></script>
<script src="/JS/Controls/ZL_Webup.js"></script>
<script>
$(function () {
    ZL_Webup.config.json.ashx = "";
    ZL_Webup.config.json.accept = "img";
    ZL_Webup.config.hid = "zxtp";
    $("#upfile_btn").click(ZL_Webup.ShowFileUP);
})
function AddAttach(file, ret, pval) { return ZL_Webup.AddAttach(file, ret, pval); }

</script>

此方法涉及页面：

Template\Ybaby\医生\医生_购买页.html

//-----取消上传多图片必须登录验证
\Plugins\WebUploader\WebUP.aspx
\Plugins\WebUploader\WebUP.aspx.cs
\Plugins\Uploadify\UploadFileHandler.ashx

明天试一下