js拖拽图片/input上传+form提交+ajax上传到struts

来源：互联网发布：淘宝虚拟物品退款诈骗编辑：程序博客网时间：2024/06/08 02:03

效果展示：
这里写图片描述

1、html部分

<div class="input_part" type="text">    <div class="icon_search"></div>    <input type="text" name="input_text" id="input_text">    <button id="search_btn">搜索</button>    <div class="openImg"></div></div><div class="image_part js_hide">    <div class="drag_image" id="drag_image">拖拽图片到这里</div>    <div class="button_image">        <form id="localUploadForm">            <a><input type="file" name="file" id="localUpload">本地上传图片</a>        </form>    </div>    <div class="image_close icono-cross"></div></div>

input_part是搜索那一栏，image_part是拖拽+上传图片那一块。点击搜索栏的相机按钮（openImg），移除image_part的js_hide，才展示上传图片栏。（模仿百度搜索）

2、CSS部分

太多就不全写了，一个心得，组件没有放在想要的位置时，多试试position（absolute或relative）、display（inline-block）、left、right、margin等设置。

着重列一下“本地上传图片”的按钮css。

.button_image{    position: relative;    display: inline-block;    margin: 15px auto;    height: 50px;    width: 90%;}.button_image a{    position: absolute;    display: inline-block;    background: #fff;    border: 1px solid #999;    border-radius: 4px;    padding: 4px;    overflow: hidden;    color: #555;    text-decoration: none;    text-indent: 0;    line-height: 40px;    width: 100px;    height: 40px;    font-size: 14px;    text-align: center;    word-break : keep-all;    left: 0;     right: 0;     margin: auto;}.button_image a:hover{    border-color: #ea150b;    cursor: pointer;    text-decoration: none;}#localUpload{    position: absolute;    font-size: 20px;    width:100px;    height: 50px;    top: 0px;    opacity: 0;}#localUpload:hover{    cursor: pointer;}

3、js部分

这里只用到了jquery。
流程设定是：拖拽图片或打开文件选择器选择图片，这个操作完成的瞬间，就进行图片上传，得到返回值后将上传的图片，和返回的结果一起展示。

$(function() {    clickEvents();});function clickEvents(){    $('.openImg').bind('click',function(event) {        $(".image_part").removeClass("js_hide");    });    $('.image_close').bind('click',function(event) {        $(".image_part").addClass("js_hide");    });    //点击按钮上传    $(".button_image a").on("change","input[type='file']",function() {    //传入的是this.files[0]        uploadImage(this.files[0]);    });    //拖拽上传    new dragUpload({        dragBox : '#drag_image'    });}//参考github的两篇开源，具体见文末链接function dragUpload(obj){    var $dragBox    = $(obj.dragBox),//jQuery对象        JdragBox    = $dragBox[0];//原生对象    //阻止浏览器默认行。     $(document).on({         dragleave:function(e){//拖离             e.preventDefault();         },         drop:function(e){//拖后放             e.preventDefault();         },         dragenter:function(e){//拖进             e.preventDefault();         },         dragover:function(e){//拖来拖去             e.preventDefault();         }     });    var dropper = document.getElementById("drag_image");    dropper.ondragenter = function (e) {        $(".drag_image").css('background', "#ddd");        e.preventDefault();    };    dropper.ondragover = function (e) {        e.preventDefault();    };    dropper.ondragleave = function (e) {        $(".drag_image").css('background', "#eee");        e.preventDefault();    };    //携带目标释放    JdragBox.addEventListener('drop',function(e){        var fileList = e.dataTransfer.files;//获取文件对象        //如果没有文件，直接结束方法        if( fileList.length <= 0 ){            return fasle;        }else{            uploadImage(fileList[0]);            //本文设定一次只上传一个文件，因此不管打开多少个，都只取第一个            //如果想要拖拽多个文件处理，可循环，具体见参考链接        }    },false);}//拖拽和点击按钮通用的上传方法function uploadImage(fileObj){    var obj = fileObj,    fileType = fileObj.type,    fileSize = fileObj.size,    reader = new FileReader();    var maxSize = 20480;//上传图片的最大size，单位kb，此处换算的话就是20M    var reg =  /(image)/;//判断文件类型的正则    //检查类型    if( !reg.test( fileType ) ){        alert('不是正确的数据类型');        return false;    }    if( fileSize > maxSize*1024 ){        alert('素材大于了'+ maxSize +'KB');        return false;    }    //form！！！把obj放进去！！！    var form = new FormData();    form.append("file", obj);    $.ajax({        type : "post",        url : "act_GetImage",//我的struts中的action        data : form,        processData : false,        contentType : false,        success : function(data) {            //...这里的内容下篇博客说            //主要是获得返回值（图片链接）并展示            }        },        error : function(data) {            alert("提交失败！");        }    });}

4、struts部分

总之这个项目里目前用到了那么多lib，我已经分不清哪些是这个功能用到的哪些是别个功能用到的了。
这里写图片描述

struts.xml用的通配符，具体百度。

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts-2.0.dtd"><struts><constant name="struts.multipart.maxSize" value="20971520" />    <package name="thisKnowledge" extends="struts-default,json-default">        <action name="*_*" class="meiko.server.{2}"            method="{1}_{2}">            <result name="success" type="json">                <param name="root">actJson</param>            </result>        </action>    </package></struts>

关于struts的内容前面应该写过博客了，结构是类似的。

package meiko.server;import java.io.File;import java.io.IOException;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import org.apache.commons.io.FileUtils;import com.opensymphony.xwork2.ActionSupport;public class GetImage extends ActionSupport {    /**     *      */    private static final long serialVersionUID = 1L;    private File file;//这个file就是上传的文件，我猜可能是因为在formdata里用了file标签吧。    private String fileContentType;//然后这两个不用人为设置就能取到值，就很迷    private String fileFileName;    private JSONArray actJson;    public String act_GetImage() throws Exception {        try {            String target = ("./upload/" + fileFileName);            File targetFile = new File(target);            //用这神奇的copyfile就可以把文件放到指定位置了            FileUtils.copyFile(file, targetFile);            // 这里应该是调用一个外部方法或接口，处理图片，返回检索结果。            // 因为只是个demo，所以就手写返回值好了。            actJson = new JSONArray();            for(int i = 0;i<8;i++){                JSONObject json = new JSONObject();                json.put("path", "../imgs/0"+(i+1)+".jpg");                json.put("title", (i+1)+".jpg");                json.put("message", "this is message");                actJson.add(json);            }            return SUCCESS;        } catch (IOException e) {            e.printStackTrace();            return ERROR;        }    }    public File getFile() {        return file;    }    public void setFile(File file) {        this.file = file;    }    public String getFileContentType() {        return fileContentType;    }    public void setFileContentType(String fileContentType) {        this.fileContentType = fileContentType;    }    public String getFileFileName() {        return fileFileName;    }    public void setFileFileName(String fileFileName) {        this.fileFileName = fileFileName;    }    public JSONArray getActJson() {        return actJson;    }    public void setActJson(JSONArray actJson) {        this.actJson = actJson;    }}

嗯………………写完以后发现并没有< form >标签什么事，也许html里的< form >标签是可以删掉的。

参考：
https://github.com/awarriorer/H5DragImgUpload
https://github.com/zouyang1230/H5-base64-encoder
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav

阅读全文

0 0