diyupload插件:批量图片上传

举报
黄啊码 发表于 2022/06/28 22:45:40 2022/06/28
【摘要】 1、引入文件插件 2、对div控件重写(插件实现) <code class="hljs javascript has-numbering"><span class="hljs-comment">// 初始化上传图片插件</span> $(<span class="hljs-strin...

<code class="hljs javascript has-numbering"><span class="hljs-comment">// 初始化上传图片插件</span>
    $(<span class="hljs-string">'#upload_bottom1'</span>).diyUpload({
        url : <span class="hljs-string">'fileUploadAction'</span>,
        success : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> {</span>
            $.ajax({
                async : <span class="hljs-literal">false</span>,
                url : <span class="hljs-string">"addProductImg"</span>,
                data : {
                    prodId : prodId,
                    imgUrl : data.message,
                    type : <span class="hljs-number">1</span>,
                    sort : <span class="hljs-number">1</span>
                },
                dataType : <span class="hljs-string">"JSON"</span>,
                type : <span class="hljs-string">"POST"</span>,
                success : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(result)</span> {</span>
                    <span class="hljs-keyword">if</span> (result > <span class="hljs-number">0</span>) {
                        getPic(<span class="hljs-number">1</span>);
                    }
                }
            });
        },
        error : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(err)</span> {</span>
            alert(err);
        },
        buttonText : <span class="hljs-string">'选择文件'</span>,
        chunked : <span class="hljs-literal">true</span>,
        <span class="hljs-comment">// 分片大小</span>
        chunkSize : <span class="hljs-number">512</span> * <span class="hljs-number">1024</span>,
        <span class="hljs-comment">// 最大上传的文件数量, 总文件大小,单个文件大小(单位字节);</span>
        fileNumLimit : <span class="hljs-number">50</span>,
        fileSizeLimit : <span class="hljs-number">500000</span> * <span class="hljs-number">1024</span>,
        fileSingleSizeLimit : <span class="hljs-number">50000</span> * <span class="hljs-number">1024</span>,
        accept : {}
    });</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li></ul>

//点击上传后执行:
这里写图片描述

/分析:执行了两个操作:
(1)、上传图片都服务器:fileUploadAction
相应:
这里写图片描述
//stucts拦截请求,

<code class="hljs applescript has-numbering"><action <span class="hljs-property">name</span>=<span class="hljs-string">"fileUploadAction"</span> <span class="hljs-type">class</span>=<span class="hljs-string">"yamadv.com.upload.FileAction"</span>>
               <<span class="hljs-constant">result</span> type=<span class="hljs-string">"json"</span> <span class="hljs-property">name</span>=<span class="hljs-string">"success"</span>>
                   <param <span class="hljs-property">name</span>=<span class="hljs-string">"contentType"</span>>
                       <span class="hljs-type">text</span>/html
                   </param>
               </<span class="hljs-constant">result</span>>
               <<span class="hljs-constant">result</span> type=<span class="hljs-string">"json"</span> <span class="hljs-property">name</span>=<span class="hljs-string">"error"</span>>
                   <param <span class="hljs-property">name</span>=<span class="hljs-string">"contentType"</span>>
                       <span class="hljs-type">text</span>/html
                   </param>
               </<span class="hljs-constant">result</span>>
        </action></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

//到action中执行,后返回数据:

<code class="hljs java has-numbering"><span class="hljs-keyword">public</span> String <span class="hljs-title">execute</span>() <span class="hljs-keyword">throws</span> Exception {
        String path = ServletActionContext.getServletContext().getRealPath(<span class="hljs-string">"/upload"</span>);
        String pathuri = ServletActionContext.getRequest().getContextPath();
        FileInputStream inputStream=<span class="hljs-keyword">null</span>;
        FileOutputStream outputStream=<span class="hljs-keyword">null</span>;
        <span class="hljs-keyword">try</span> {
            File f = <span class="hljs-keyword">this</span>.getFile();
            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.getFileFileName().endsWith(<span class="hljs-string">".exe"</span>)) {
                message = <span class="hljs-string">"对不起,你上传的文件格式不允许!!!"</span>;
                <span class="hljs-keyword">return</span> ERROR;
            }
            inputStream = <span class="hljs-keyword">new</span> FileInputStream(f);
            String s = DateParse.date4String(<span class="hljs-keyword">new</span> Date());
            fileFileName = s + <span class="hljs-keyword">this</span>.getFileFileName();
            outputStream = <span class="hljs-keyword">new</span> FileOutputStream(path + <span class="hljs-string">"/"</span>
                    + fileFileName);
            <span class="hljs-keyword">byte</span>[] buf = <span class="hljs-keyword">new</span> <span class="hljs-keyword">byte</span>[<span class="hljs-number">1024</span>];
            <span class="hljs-keyword">int</span> length = <span class="hljs-number">0</span>;
            <span class="hljs-keyword">while</span> ((length = inputStream.read(buf)) != -<span class="hljs-number">1</span>) {
                outputStream.write(buf, <span class="hljs-number">0</span>, length);
            }

            <span class="hljs-comment">//message = pathuri + "/upload/" + fileFileName;</span>
            message = <span class="hljs-string">"/upload/"</span> + fileFileName;

        } <span class="hljs-keyword">catch</span> (Exception e) {
            e.printStackTrace();
            message = <span class="hljs-string">"对不起,文件上传失败了!!!!"</span>;
        }<span class="hljs-keyword">finally</span>{
            outputStream.flush();
            inputStream.close();
            outputStream.close();

        }
        <span class="hljs-keyword">return</span> SUCCESS;
    }</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul>

(2)、将数据add进数据库中:返回json数据:1232

<code class="hljs java has-numbering"><span class="hljs-javadoc">/**
     * 添加商品图片
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">addProductImg</span>() {
        <span class="hljs-keyword">int</span> prodId = Integer.parseInt(<span class="hljs-keyword">this</span>.getRequest().getParameter(<span class="hljs-string">"prodId"</span>));
        String imgUrl = <span class="hljs-keyword">this</span>.getRequest().getParameter(<span class="hljs-string">"imgUrl"</span>);
        <span class="hljs-keyword">int</span> type = Integer.parseInt(<span class="hljs-keyword">this</span>.getRequest().getParameter(<span class="hljs-string">"type"</span>));
        <span class="hljs-keyword">int</span> sort = Integer.parseInt(<span class="hljs-keyword">this</span>.getRequest().getParameter(<span class="hljs-string">"sort"</span>));

        Tproducyimg pimg = <span class="hljs-keyword">new</span> Tproducyimg();
        pimg.setType(type);
        pimg.setImgUrl(imgUrl);
        pimg.setProdId(prodId);
        pimg.setIsValid(<span class="hljs-keyword">true</span>);
        pimg.setSort(sort);

        <span class="hljs-keyword">int</span> result = <span class="hljs-keyword">this</span>.productImgService.addProductImg(pimg);
        <span class="hljs-keyword">if</span> (result > <span class="hljs-number">0</span>) {
            MSG = <span class="hljs-string">"OK"</span>;
        } <span class="hljs-keyword">else</span> {
            MSG = <span class="hljs-string">"NO"</span>;
        }

        <span class="hljs-keyword">this</span>.writeJson(result);
    }</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>

action补充:如何相应请求到前台:

<code class="hljs java has-numbering"><span class="hljs-annotation">@Component</span>(value=<span class="hljs-string">"baseAction"</span>)
<span class="hljs-keyword">public</span> <span class="hljs-keyword">abstract</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BaseAction</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ActionSupport</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">ServletRequestAware</span> {</span>

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">long</span> serialVersionUID = -<span class="hljs-number">6604674795899991348</span>L;

    <span class="hljs-keyword">private</span> HttpServletRequest request;
    <span class="hljs-keyword">private</span> HttpSession session;
    <span class="hljs-annotation">@SuppressWarnings</span>(<span class="hljs-string">"unused"</span>)
    <span class="hljs-keyword">private</span> ServletConfig config;

    <span class="hljs-keyword">public</span> ServletConfig <span class="hljs-title">getConfig</span>(){
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.config = (ServletConfig)request.getSession().getServletContext().getAttribute(<span class="hljs-string">"servletConfig"</span>); 
    }

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setConfig</span>(ServletConfig config) {
        <span class="hljs-keyword">this</span>.config = config;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setServletRequest</span>(HttpServletRequest arg0) {
        <span class="hljs-comment">// TODO Auto-generated method stub</span>
        <span class="hljs-keyword">this</span>.request=arg0;
        <span class="hljs-keyword">this</span>.session=<span class="hljs-keyword">this</span>.request.getSession();<span class="hljs-comment">//get session for client</span>
    }

    <span class="hljs-keyword">public</span> HttpServletRequest <span class="hljs-title">getRequest</span>() {
        <span class="hljs-keyword">return</span> request;
    }
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setRequest</span>(HttpServletRequest request) {
        <span class="hljs-keyword">this</span>.request = request;
    }
    <span class="hljs-keyword">public</span> HttpSession <span class="hljs-title">getSession</span>() {
        <span class="hljs-keyword">return</span> session;
    }
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setSession</span>(HttpSession session) {
        <span class="hljs-keyword">this</span>.session = session;
    }

    <span class="hljs-javadoc">/**
     * 获得response
     * 
     *<span class="hljs-javadoctag"> @return</span>
     */</span>
    <span class="hljs-keyword">public</span> HttpServletResponse <span class="hljs-title">getResponse</span>() {
        <span class="hljs-keyword">return</span> ServletActionContext.getResponse();
    }

    <span class="hljs-javadoc">/**
     * 将对象转换成JSON字符串,并响应回前台
     * 
     *<span class="hljs-javadoctag"> @param</span> object
     *<span class="hljs-javadoctag"> @param</span> includesProperties
     *            需要转换的属性
     *<span class="hljs-javadoctag"> @param</span> excludesProperties
     *            不需要转换的属性
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">writeJsonByFilter</span>(Object object, String[] includesProperties, String[] excludesProperties) {
        <span class="hljs-keyword">try</span> {
            FastjsonFilter filter = <span class="hljs-keyword">new</span> FastjsonFilter();<span class="hljs-comment">// excludes优先于includes</span>
            <span class="hljs-keyword">if</span> (excludesProperties != <span class="hljs-keyword">null</span> && excludesProperties.length > <span class="hljs-number">0</span>) {
                filter.getExcludes().addAll(Arrays.<String> asList(excludesProperties));
            }
            <span class="hljs-keyword">if</span> (includesProperties != <span class="hljs-keyword">null</span> && includesProperties.length > <span class="hljs-number">0</span>) {
                filter.getIncludes().addAll(Arrays.<String> asList(includesProperties));
            }
            String json;
            String User_Agent = getRequest().getHeader(<span class="hljs-string">"User-Agent"</span>);
            <span class="hljs-keyword">if</span> (StringUtils.indexOfIgnoreCase(User_Agent, <span class="hljs-string">"MSIE 6"</span>) > -<span class="hljs-number">1</span>) {
                <span class="hljs-comment">// 使用SerializerFeature.BrowserCompatible特性会把所有的中文都会序列化为\\uXXXX这种格式,字节数会多一些,但是能兼容IE6</span>
                json = JSON.toJSONString(object, filter, SerializerFeature.WriteDateUseDateFormat, SerializerFeature.DisableCircularReferenceDetect, SerializerFeature.BrowserCompatible);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-comment">// 使用SerializerFeature.WriteDateUseDateFormat特性来序列化日期格式的类型为yyyy-MM-dd hh24:mi:ss</span>
                <span class="hljs-comment">// 使用SerializerFeature.DisableCircularReferenceDetect特性关闭引用检测和生成</span>
                json = JSON.toJSONString(object, filter, SerializerFeature.WriteDateUseDateFormat, SerializerFeature.DisableCircularReferenceDetect);
            }
            getResponse().setContentType(<span class="hljs-string">"text/html;charset=utf-8"</span>);
            getResponse().getWriter().write(json);
            getResponse().getWriter().flush();
            getResponse().getWriter().close();
        } <span class="hljs-keyword">catch</span> (IOException e) {
            e.printStackTrace();
        }
    }

    <span class="hljs-javadoc">/**
     * 将对象转换成JSON字符串,并响应回前台
     * 
     *<span class="hljs-javadoctag"> @param</span> object
     *<span class="hljs-javadoctag"> @throws</span> IOException
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">writeJson</span>(Object object) {
        writeJsonByFilter(object, <span class="hljs-keyword">null</span>, <span class="hljs-keyword">null</span>);
    }

    <span class="hljs-javadoc">/**
     * 将对象转换成JSON字符串,并响应回前台
     * 
     *<span class="hljs-javadoctag"> @param</span> object
     *<span class="hljs-javadoctag"> @param</span> includesProperties
     *            需要转换的属性
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">writeJsonByIncludesProperties</span>(Object object, String[] includesProperties) {
        writeJsonByFilter(object, includesProperties, <span class="hljs-keyword">null</span>);
    }

    <span class="hljs-javadoc">/**
     * 将对象转换成JSON字符串,并响应回前台
     * 
     *<span class="hljs-javadoctag"> @param</span> object
     *<span class="hljs-javadoctag"> @param</span> excludesProperties
     *            不需要转换的属性
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">writeJsonByExcludesProperties</span>(Object object, String[] excludesProperties) {
        writeJsonByFilter(object, <span class="hljs-keyword">null</span>, excludesProperties);
    }

}</code>

文章来源: markwcm.blog.csdn.net,作者:黄啊码,版权归原作者所有,如需转载,请联系作者。

原文链接:markwcm.blog.csdn.net/article/details/52441429

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。