Maison >interface Web >Tutoriel H5 >Utilisation de l'interface Java html5 ajax pour implémenter le téléchargement d'un exemple de code d'image

Utilisation de l'interface Java html5 ajax pour implémenter le téléchargement d'un exemple de code d'image

零下一度
零下一度original
2018-05-11 14:40:204118parcourir

Téléchargement d'images HTML5 [Téléchargement de fichiers], j'ai trouvé beaucoup d'informations sur Internet, il existe principalement deux méthodes

1 à partir de la méthode de soumission de formulaire

<form action="pushUserIcon" method="post" enctype="multipart/form-data"> 
    <table> 
        <tr> 
            <td width="50" align=left>图片:</td> 
            <td><input type="file" name="file"/></td>            
        </tr> 
        <tr> 
            <td width="50" align="left">用户id:</td> 
            <td><input type="text" name="userId"/></td>            
        </tr>
        <tr>
            <td><input type="submit"> </td>
        </tr>
    </table> 
</form>

. Remarque : enctype="multipart/form-data" doit être renseigné

1.1 Soumettre la page Java directement :
<.>

  @RequestMapping(value="/pushUserIcon",method=RequestMethod.POST)
@ResponseBody
public String pushUserIcon(HttpServletRequest request, HttpServletResponse response) throws IOException,BaseException { 
 
    String result = null;
    String userId = request.getParameter("userId");
    try{
        //转型为MultipartHttpRequest(重点的所在) 
        MultipartHttpServletRequest multipartRequest  =  (MultipartHttpServletRequest) request; 
        //获得第1张图片(根据前台的name名称得到上传的文件)  
        MultipartFile file  =  multipartRequest.getFile("file");
        result = uploadImageServic.uploadFile(file, request, userId); 
         
        System.out.println("result:" + result); 
        response.setContentType("text/html;charset=utf8"); 
        response.getWriter().write("result:" + result);    
      }catch(Exception e){
        BaseException baseException = new BaseException(e);
        baseException.setErrorMsg("Upload API Exception");
        throw baseException;
    }      
    return  null; 
}


1.2 Il existe de nombreux js et jQuery natifs sur Internet, donc je ne le ferai pas. entrez dans les détails ici.
1.2.1. Deux façons de créer à partir de données

var formData = new FormData($("#myForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。 
               
       //var formData = new FormData();//构造空对象,下面用append 方法赋值。 
//       formData.append("policy", ""); 
//       formData.append("signature", ""); 
//       formData.append("file", $("#file_upload")[0].files[0]);

2. Soumettre sans formulaire :

<table style="border: 1px solid black; width: 100%">
     <tr>
            <td width="50" align=left>图片:</td> 
            <td><input type="file"  id="imageFile" name="img" multiple="multiple"/></td>
            <td>
                <input type="button" value="调用" onclick="pushImg()" />
            </td>
        </tr>       
</table>
C'est tout pour le HTML. Je pense que tout le monde devrait pouvoir le comprendre. Parlons maintenant de ces deux méthodes de soumission. Comment est codé Ajax ? [La méthode de soumission à partir du formulaire peut également utiliser js ou soumettre directement l'actualisation de la page]

Il existe également deux types d'encodage Ajax :

1. Js natif

function sub()
{
    var file = document.getElementById("imageFile");
    var files = file.files;
    for(var i = 0 ; i < files.length;i++)
    {
        uploadFile(files[i]);
    }
}
 
var xhr = null;
function uploadFile(file) {
    xhr = new XMLHttpRequest();
   /*  xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false); */
    xhr.open("post", "upload/", true); //访问控制器是upload,后面必须加&#39;/&#39;否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
    var fd = new FormData();
    fd.append("userID", "1");
    fd.append("errDeviceType", "001");
    fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");
    fd.append("errType", "001");
    fd.append("errContent", "XXXXXX");
    fd.append("errPic", file);
    xhr.send(fd);
    xhr.onreadystatechange = cb;
}
function cb()
{
    if(xhr.status == 200)
    {
        var b = xhr.responseText;
        if(b == "success"){
            alert("上传成功!");
        }else{
            alert("上传失败!");
        }
    }
}

2 .jquery

function pushImg(obj) {
    debugger;
    var url = "upload/"; //访问控制器是upload,后面必须加&#39;/&#39;否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
    var param = $("#errorParameter").val();
 
    var files = $("#imageFile").get(0).files[0]; //获取file控件中的内容
 
    var fd = new FormData();
    fd.append("userID", "1");
    fd.append("errDeviceType", "001");
    fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");
    fd.append("errType", "001");
    fd.append("errContent", "XXXXXX");
    fd.append("errPic", files);
    $.ajax({
        type: "POST",
        contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
        processData: false, //必须false才会自动加上正确的Content-Type 
        url: url,
        data: fd,
        success: function (msg) {
            debugger;
            var jsonString = JSON.stringify(msg);
            $("#txtTd").text(jsonString)
            alert(jsonString);
        },
        error: function (msg) {
            debugger;
            alert("error");
        }
    });
}
Maintenant, le devant- la fin devrait être presque là, maintenant c'est l'interface. Mes paramètres et chemins d'accès sont tous prêts. Maintenant, j'ai juste besoin du service d'interface :

spring mvc framework :
.

@RequestMapping(value = { "upload" })
        public void pushErrorData(HttpServletRequest request,
                    HttpServletResponse response) throws BaseException {
            String userID=request.getParameter("userID");
                 
                 
            // 转型为MultipartHttpRequest(重点的所在)这个就是上面ajax中提到如果直接访问此接口而不加"/",此转型就会报错
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
                 
            //MultipartFile file = multipartRequest.getFiles("errPic");//获取文件集合  对应  jquery $("#imageFile").get(0).files
            // 获得第1张图片(根据前台的name名称得到上传的文件)
            MultipartFile file = multipartRequest.getFile("errPic"); //对应  jquery $("#imageFile").get(0).files[index]
            Map<String, Object> map = new HashMap<String, Object>();
            if (null!=file && !file.isEmpty()) {
                try {
                    map = Common.uploadFile(file);
                         
                } catch (IOException e) {
                    BaseException baseException = new BaseException(e);
                    //baseException.setErrorMsg(imgErrorMsg);
                    throw baseException;
                }
            }
        }
 
/**
     * 图片上传
     *
     * @param file
     * @return
     * @throws IOException
     * @throws BaseException
     */
    public static Map<String, Object> uploadFile(MultipartFile file)
            throws IOException, BaseException {
        String fail = ConfigBundleHelper.getValue("busConfig", "fail");//上传失败状态
        String success = ConfigBundleHelper.getValue("busConfig", "success");//上传成功状态
        String errorMsg = ConfigBundleHelper.getValue("busConfig","imgErrorMsg");//上传错误信息
        String filePath = ConfigBundleHelper.getValue("busConfig", "filePath");//上传路径,本来是相对路径,但是在发布后路径会创建在tomcat的bin目录下,所以接口上传的路径是一个难题,我用的是绝对路径,等到发布到Linux环境中,通过配置文件修改路径为Linux中的资源地址【防止工程删除而资源文件不会丢失】,然后重新发布工程时再通过Linux的命令把我们需要的资源文件导入到我们发布的工程项目中。
        String size = ConfigBundleHelper.getValue("busConfig", "fileSize");
        String interfaceService = ConfigBundleHelper.getValue("busConfig",
                "interfaceService");
         
        long maxFileSize = (Integer.valueOf(size)) * 1024 * 1024;
        String suffix = file.getOriginalFilename().substring(
                file.getOriginalFilename().lastIndexOf("."));
        long fileSize = file.getSize();
        Map<String, Object> map = new HashMap<String, Object>();
        if (suffix.equals(".png") || suffix.equals(".jpg")) {
            if (fileSize < maxFileSize) {
                // System.out.println("fileSize"+fileSize);
                String fileName = file.getOriginalFilename();
                fileName = new String(fileName.getBytes("ISO-8859-1"), "UTF-8");
                File tempFile = new File(filePath, new Date().getTime()
                        + fileName);
 
                try {
                    if (!tempFile.getParentFile().exists()) {
                        tempFile.getParentFile().mkdirs();//如果是多级文件使用mkdirs();如果就一层级的话,可以使用mkdir()
                    }
                    if (!tempFile.exists()) { 
                        tempFile.createNewFile();
                    }
                    file.transferTo(tempFile);
                } catch (IllegalStateException e) {
                    BaseException baseException = new BaseException(e);
                    baseException.setErrorMsg(errorMsg);
                    throw baseException;
                }
 
                map.put("SUCESS", success);
                map.put("data",interfaceService + filePath + new Date().getTime() + tempFile.getName());
 
            } else {
                map.put("SUCESS", fail);
                map.put("data", "Image too big");
            }
 
        } else {
            map.put("SUCESS", fail);
            map.put("data", "Image format error");
        }
        return map;
    }

这是我在工作中所遇到到问题,分享给大家,希望大家不会在这个问题上花费大量的时间。谢谢

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn