【easyui 】上传图片

最新推荐文章于 2023-06-26 18:24:22 发布

小魏的马仔

最新推荐文章于 2023-06-26 18:24:22 发布

阅读量1.7k

点赞数 1

分类专栏： easyui 文章标签： easyui 图片

本文链接：https://blog.csdn.net/xuexiiphone/article/details/69396731

版权

easyui 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

html

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<jsp:include page="../../initlib/initAll.jsp"></jsp:include>

<script type="text/javascript">
    var tempUrl="${pageContext.request.contextPath}/docinf/docinfDoc";
    var dataGrid=null;
    var costCenterDialog = null;
    $(function() {
        $(".file").on("change","input[type='file']",function(){
            debugger
            var filePath=$(this).val();
            var extStart=filePath.lastIndexOf(".");
            var ext=filePath.substring(extStart,filePath.length).toUpperCase();
            if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){           
                $('#showName').textbox('setValue',"未选择任何文件");
                return false 
            }else{
                 var arr=filePath.split('\\');
                 var fileName=arr[arr.length-1];
                 $('#showName').textbox('setValue',fileName);
            }
        })
    });

    function cleanFileSelectInput() {
        var file = $('#showName').textbox('setValue','未选择任何文件');
    }


    //上传图片
    function goToImageUploadJsp(){
        var file = $('#showName').textbox('getValue');
        if(file == "未选择任何文件") {
            messagerShow('提示', '请选择待上传的图片');
            return;
        }
        var row = dataGrid.treegrid('getSelected');
        if(row == null){
            messagerShow('提示', '请选择一条数据');
        }else{
            showLoading();

            $.ajaxFileUpload({
                url:"${pageContext.request.contextPath}/ec/target/ecImageSave.do?id="+row.id,
                secureuri: false,
                fileElementId:"uploadFile",
                dataType: 'text',
                type:"POST",
                //data: getFormData("searchForm"),
                success: function (data, status){

                    if(status == "success"){
                        hideLoading();                  
                        messagerShow('提示', "成功上传"+row.statisticMonth+"月活动图片");
                    }else{
                        hideLoading();
                        messagerShow('提示', "上传活动图片失败");
                    }
                    dataGrid.datagrid('reload');
                },
                error: function (data, status, e){
                    hideLoading();
                    messagerShow('提示', "上传活动图片失败!");
                }
            });  
        }
    }


</script>
</head>
<body class="easyui-layout" data-options="fit : false ,border : false" >
<div id="toolbar" style="display: block;">
        <table>
            <tr>
                <td>
                    <form id="searchForm" style="margin:4px 0px 0px 0px">
                        <table>
                            <tr>
                                <td><a href="javascript:;" class="file">选择文件
                                    <input class="form-control" type="file" name="uploadFile" multiple id="uploadFile" accept=".jpg,.png"/></a></td>
                                <td><input id="showName" class="easyui-textbox" data-options="iconCls:'icon-search',value:'未选择任何文件',readonly:true" style="width:150px">
                                <td><a onclick="goToImageUploadJsp()" href="javascript:void(0);" class="easyui-linkbutton ebsButton" data-options="iconCls:'fa fa-upload fa-1x',plain:true">上传图片</a></td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
        </table>
</div>

</body>
</html>

controller

    /**  
     * 上传图片  
     *  
     * @param files  
     * @param request  
     * @return  
     */  
    @ResponseBody  
    @RequestMapping("/ecImageSave")  
    public String ecImageSave(HttpServletRequest request,@RequestParam("uploadFile") CommonsMultipartFile uplodaFile,String id) {  
        JSONObject json=new JSONObject();
        try {
            if (uplodaFile != null && uplodaFile.getSize() > 0) {  
                String uploadResult = saveFile(request, uplodaFile);  
                if(!uploadResult.equals("")){ 
                    json.put("success", true);
                }else{
                    json.put("success", false);
                } 
            }  
        } catch (Exception e) {
            log.error("上传图片异常", e);
            json.put("success", false);
        }
        return json.toString();
    }

        /***  
     * 保存文件  
     *  
     * @param file  
     * @return  
     */  
    private String saveFile(HttpServletRequest request, MultipartFile file) {  
        // 判断文件是否为空  
        String result = "";
        if (!file.isEmpty()) {  
            try {  
                // 保存的文件路径(如果用的是Tomcat服务器，文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中  )  
                String filePath = request.getSession().getServletContext()  
                    .getRealPath("/") + "actimg/" + file.getOriginalFilename(); 
                File saveDir = new File(filePath);  
                if (!saveDir.getParentFile().exists())  
                    saveDir.getParentFile().mkdirs(); 
                // 转存文件  
                file.transferTo(saveDir); 

                return file.getOriginalFilename();  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        }  
        return result;  
    }

小魏的马仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【easyui 】上传图片

html<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fn" uri="http://java.sun.co
复制链接

扫一扫