Méthode Struts2+jquery.form.js pour implémenter l'image et le fichier upload

Méthode Struts2+jquery.form.js pour implémenter l'image et le fichier upload_jquery

WBOY

Libérer： 2016-05-16 15:02:10

original

1897 Les gens l'ont consulté

L'exemple de cet article décrit la méthode de téléchargement d'images et de fichiers à l'aide de Struts2+jquery.form.js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

jquery.form.js est un plug-in jQuery officiel qui prend en charge le téléchargement de fichiers asynchrone. Site officiel : http://plugins.jquery.com/form/

Combiné avec Struts2 pour télécharger facilement des fichiers en trois étapes

Généralement, une page peut avoir plus d'un formulaire de formulaire, donc soumettre un formulaire d'un côté affectera un autre formulaire. Pour cette raison, le formulaire de téléchargement d'image peut être téléchargé en utilisant la méthode de soumission sans actualisation, qui est asynchrone. télécharger À ce stade, jquery .from.js est utile.

1.HTML

Importez ce jS sur la page et rédigez le formulaire de téléchargement

<script type="text/javascript" src="/js/jquery.form.js"></script>
<!—图片上传 -->
<s:form id="picForm" name="picForm" action="/notice/showAddNotice.action" method="post" 
  enctype="multipart/form-data">
    <input type="file" name="pic" size="30"/><input type="submit" value="上传"/>
</s:form>

Copier après la connexion

2.JS

// 为表单绑定异步上传的事件
$(function(){
    // 为表单绑定异步上传的事件
    $("#picForm").ajaxForm({
    url : "${pageContext.request.contextPath}/notice/uploadPic.action", // 请求的url
    type : "post", // 请求方式
    dataType : "text", // 响应的数据类型
    async :true, // 异步
    success : function(imageUrl){
        //alert(imageUrl);
    },
    error : function(){
        alert("数据加载失败！");
    }
});
// 为提交按钮绑定事件
$("#saveBtn").click(function(){
    // 表单输入较验
    var title = $("#title");
    // 获取textarea的内容
    var content = tinyMCE.get('content').getContent();
    var msg = "";
    if ($.trim(title.val()) == ""){
        msg = "公告标题不能为空！";
        title.focus();
    }else if ($.trim(content) == ""){
        msg = "内容不能为空！";
    }
    msg = "";
    if (msg != ""){
        alert(msg);
    }else{
        // 表单提交
        $("#noticeForm").submit();
    }
});

Copier après la connexion

3. Struts2Action

public class uploadPicAjax extends AbstractAjaxAction {
    private static final long serialVersionUID = -4742151106080093662L;
    /** Struts2文件上传的三个属性 */
    private File pic;
    private String picFileName;
    private String picContentType;
    @Override
    protected String getJson() throws Exception {
        //获取项目部署的路径
        String realPath = ServletActionContext.getServletContext()
                .getRealPath("/images/notice");
        //生成新的文件名
        String newFileName = UUID.randomUUID().toString()+"."
                +FilenameUtils.getExtension(picFileName);// 获取文件的后缀名 aa.jpg --> jpg
        FileUtils.copyFile(pic, new File(realPath + File.separator + newFileName));
        return "/images/notice/" + newFileName;
    }
    /** setter and getter method **/
    ......
}

Copier après la connexion

4. Configurer Struts2.xml

<!-- 图片的异步上传 -->
<action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax">
</action>

Copier après la connexion

D'accord, j'ai fini d'écrire de la page vers le backend. Ensuite, vous pouvez le télécharger. complet!

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets et techniques de commutation JQuery", "Résumé des effets et techniques de glisser jQuery ", "Résumé des compétences de l'extension JQuery", "Résumé des effets spéciaux classiques communs de jQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", " Résumé de l'utilisation du sélecteur jquery " et "Résumé des plug-ins courants et de leur utilisation jQuery "

J'espère que cet article sera utile à tous ceux qui programment jQuery.