1、引入文件插件
2、對div控件重寫（插件實現(xiàn)） <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">// 最大上傳的文件數(shù)量, 總文件大小,單個文件大小(單位字節(jié));</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>

//點擊上傳后執(zhí)行：

/分析：執(zhí)行了兩個操作：
（1）、上傳圖片都服務(wù)器：fileUploadAction
相應(yīng)：

//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中執(zhí)行，后返回數(shù)據(jù)：

<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）、將數(shù)據(jù)add進數(shù)據(jù)庫中：返回json數(shù)據(jù)：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補充：如何相應(yīng)請求到前臺：

<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">/*** 將對象轉(zhuǎn)換成JSON字符串，并響應(yīng)回前臺* *<span class="hljs-javadoctag"> @param</span> object*<span class="hljs-javadoctag"> @param</span> includesProperties* 需要轉(zhuǎn)換的屬性*<span class="hljs-javadoctag"> @param</span> excludesProperties* 不需要轉(zhuǎn)換的屬性*/</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優(yōu)先于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這種格式，字節(jié)數(shù)會多一些，但是能兼容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特性關(guān)閉引用檢測和生成</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">/*** 將對象轉(zhuǎn)換成JSON字符串，并響應(yīng)回前臺* *<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">/*** 將對象轉(zhuǎn)換成JSON字符串，并響應(yīng)回前臺* *<span class="hljs-javadoctag"> @param</span> object*<span class="hljs-javadoctag"> @param</span> includesProperties* 需要轉(zhuǎn)換的屬性*/</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">/*** 將對象轉(zhuǎn)換成JSON字符串，并響應(yīng)回前臺* *<span class="hljs-javadoctag"> @param</span> object*<span class="hljs-javadoctag"> @param</span> excludesProperties* 不需要轉(zhuǎn)換的屬性*/</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>

總結(jié)

以上是生活随笔為你收集整理的diyupload插件：批量图片上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。