先上效果图：

图片上传用到了以下技术：

前端用的是easyui、webuploader，后端用的是java。

直接贴关键代码

1、js部分代码

<script type="text/javascript">
    var datagridImage = [],uploader;
    // 优化retina, 在retina下这个值是2
    var ratio = window.devicePixelRatio || 1;
    var thumbnailWidth = 110 * ratio,thumbnailHeight = 110 * ratio;

    $(function() {
        var gridImage = $('#gridImage').datagrid({
            toolbar: '#tbImage',
            data: datagridImage,
            idField:'id',
            columns: [[
                { field: 'ck', checkbox: true },
                {field: 'id', title: 'ID'},
                // {field: 'url', title: '图片', width:110,
                //     formatter: function(value,row,index){
                //         return '<img src="'+value+'">';
                //     }
                // },
                {field: 'name_old', title: '原名称'},
                {field: 'name_new', title: '新名称',editor:'text',width:200},
                {field: 'file_sate', title: '状态'},
                {field: 'operate', title: '操作',
                    formatter: function(value,row,index){
                        var html = '预览';

                        return html;
                    }
                },
            ]]
        });

        gridImage.datagrid('enableCellEditing').datagrid('gotoCell', {
            index: 0,
            field: 'id'
        });

        //上传配置
        uploader = WebUploader.create({
            // swf文件路径
            swf: '#(static)/admin/javascript/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '#(ctx)/admin/common/uploadPic',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#file-select',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        uploader.onFileQueued = function( file ) {
            // fileCount++;
            // fileSize += file.size;
            //
            // if ( fileCount === 1 ) {
            //     $placeHolder.addClass( 'element-invisible' );
            //     $statusBar.show();
            // }

            addFile( file );
            // setState( 'ready' );
            // updateTotalProgress();
        };

        uploader.on('uploadBeforeSend', function (obj, data) {
            //传入表单参数
            data = $.extend(data, {
                "type": "book"
            });
        });

        uploader.on('uploadSuccess', function( file ,response ) {
            //$( '#'+file.id ).find('p.state').text('已上传');

            var rows = $("#gridImage").datagrid('getData').rows;
            var length = rows.length;
            var rowindex;
            for (var i = 0; i < length; i++) {
                if (rows[i]['id'] == file.id) {
                    rowindex = i;
                    break;
                }
            }

            $('#gridImage').datagrid('updateRow',{
                index: rowindex,
                row: {
                    file_sate: '已完成',
                    url:response.url
                }
            });

        });

        $('#file-upload').bind('click', function(){
            uploader.upload();
        });

        $("#author_id").combobox({
            url:'#(ctx)/admin/system/book/authorList',
            valueField:'id',
            textField:'name_short',
            mode:'remote',
            multiple:true,
            loadFilter: function(data){
                return data.rows;
            }
        });
    });

    function addFile( file ) {
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                console.log('不能预览');
                return;
            }
            datagridImage.push({id:file.id,url:'',url:src,name_old:file.name,name_new:file.name,file_sate:'准备中'});
            $('#gridImage').datagrid({
                data: datagridImage
            });
        }, thumbnailWidth, thumbnailHeight);
    }

</script>

html部分代码：

<div class="grid-container" style="padding: 8px">
    <div class="row">
        <div class="col_12">
            <table id="gridImage" style="height: 200px"></table>
            <div id="tbImage" style="padding: 1px 2px;">
                <a href="#" id="file-select" class="easyui-linkbutton" data-options="iconCls:'iconfont icon-file-select',plain:true">选择文件</a>
                <a href="#" id="file-upload" class="easyui-linkbutton" data-options="iconCls:'iconfont icon-file-upload',plain:true">开始上传</a>
                <span style="float: right;line-height: 26px;color:#0c80d7;font-weight: bold;">请上传主图</span>
            </div>
        </div>
    </div>

</div>

后台上传文件代码（用到了jfinal框架）：

@Clear
public void uploadPic(){
    Date date = new Date();
    SimpleDateFormat folderNameSDF = new SimpleDateFormat("yyyyMMdd");
    SimpleDateFormat newFileNameSDF = new SimpleDateFormat("HHmmssSSS");

    String folderName = folderNameSDF.format(date);
    String newFileName = newFileNameSDF.format(date);

    UploadFile file =  this.getFile("file");

    String uploadPath = "/upload/image/";
    String type = getPara("type","");
    if(StrUtil.isNotEmpty(type)){
        uploadPath = "/upload/" + type + "/image/";
    }
    if(StrUtil.isNotEmpty(folderName)){
        uploadPath = uploadPath + folderName + "/";
    }
    //创建目录
    FileUtil.mkdir(PathKit.getWebRootPath()+uploadPath);

    String fileName = file.getFileName();

    String fileExtensions = fileName.substring(fileName.lastIndexOf(".") + 1);
    if(StrUtil.isNotEmpty(newFileName)){
        fileName = newFileName + "." + fileExtensions;
    }

    //文件重命名
    file.getFile().renameTo(new File(PathKit.getWebRootPath()+uploadPath+"/"+fileName));

    renderJson(Result.Success().put("url",uploadPath+fileName).put("name",file.getFileName()));
}

需要注意的是，除了easyui、webuploader还需要引入datagrid-cellediting.js，名称这一块是可以编辑的。