首页 > 解决方案 > 使用ajax和属性图像src问题调用java方法

问题描述

我有一个动态创建的表。在表格的最后一个单元格中有图像预览部分。我正在将文件从网络位置复制到我的本地位置。我为此编写了这个java类。

public class copyFile {

    public static String main(String filename,String filepath) {
        // TODO Auto-generated method stub
        File original=new File(filepath);
        File dest=new File("T:\\Temp\\");
        try {
            FileUtils.copyFileToDirectory(original, dest);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        String newPath="T:\\Temp\\"+filename;
        return newPath;
    }

}

我正在使用这样的 jquery ajax 创建表。

<script>
if($.fn.dataTable.isDataTable( '#example' )){
    var table = $('#example').DataTable();
}
function getData(){

    $('#example tbody').html('');
    var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO_copy:";
    var URL_MIDDLE="AND PackName_copy:";
    var URL_SUFFIX="AND DocType_copy:";
    var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
    var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
    var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
    var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
    $.ajax({
        url:URL,
        dataType:'jsonp',
        jsonp : 'json.wrf',
        type :'get',
        cache :false,
        success: function(data){
            var docs=data.response.docs;
            var html='';        
            $.each(docs,function(key,value){
                var arrayExtensions=['jpg','JPG','JPG File','jpeg','JPEG image','PNG','TIFF image','tiff'];
                copy(value.FileName,value.FilePath);
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td class="text-center">'+value.PackName+'</td>';
                html+='<td class="text-center">'+value.DocType+'</td>';
                html+='<td class="text-center">'+value.DocName+'</td>';
                html+='<td class="text-center"><form method="POST" action="openDocumentServlet" target="_blank"><input name="document" value="'+value.FilePath+'" hidden><input name="docName" value="'+value.FileName+'" hidden><input id="buton" type="submit"  class="btn btn-sm" value="OPEN"></form></td>';
                html+='<td class="text-center"><form name="copyForm"><input name="filename" value="'+value.FilePath+'" hidden><input name="filepath" value="'+value.FileName+'" hidden><a href="#" class="preview"><input type="image" id="imageButton" src="images//SoftwareIcons-21-512.png" style="width:50px;height:50px;"><img id="showImages" src="" class="hide-image"/></a></form></td>';
                html+='</tr>';
            });

            $('#example').DataTable().destroy();
            $('#example tbody').html(html);
            var table=$('#example').DataTable({
                "aaSorting" : [],

            });
        },
    });


};
</script>

但是当我单击图像预览部分时,表格没有填充值,因为我动态创建了表格。我该如何解决这个问题。如果我解决了这个问题,我想在图像预览部分发生鼠标悬停动作时复制文件,并且我想显示复制的文件,如图像预览。

所以我这样调用java类。

<script>
function copy(Filename,Filepath){
    $.ajax({
        url:"copyFile.java",
        type:"GET",
        dataType:"text",
        data:{filename:Filename,filepath:Filepath},
        success:function(data){
            console.log(data);
            var newSrc=$("#showImages").attr("src").replace(data);
            $("#showImages").attr("src",data);
        }
    });

}
</script>

标签: javajqueryajax

解决方案


推荐阅读