javascript代码实例教程-HTML5 文件异步上传 ― h5uploader.js

发布时间:2019-01-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-HTML5 文件异步上传 ― h5uploader.js脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好,比较早了。其实通过H5做异步上传已经非常简单了,通过查看文档,便可以很轻松的完成这个功能,当然,如果你不愿意查看文档自己动手的话,那么就用插件咯。h5uploader是我最近封装的HTML5上传插件,代码才白来行,使用的话也比较简单,支持文件大小,类型,PRogress等等功能。本篇教程,将向你展示Nodejs,Java两种服务端的上传方法,并且附有代码示例。

 

插件下载

如果你是bower的用户的话,可以直接通过以下命令:

 

bower install h5uploader --save

当然也可以直接从GIThub Clone此项目:

 

git clone https://github.COM/wewoor/h5uploader.git

HTML代码

<input tyPE="file" id=";myfile" value="" name="myfile" multiple="multiple"/>

<button id="uploader">Upload</button>

以上是一个file类型的input元素以及一个上传触发按钮,后面带有multiple属性,表示次处支持文件多选上传,当然,你也可以一次提交多个input元素,例如:

 

<input type="file" id="myfile" value="" name="myfile" multiple="multiple"/>

<input type="file1" id="myfile1" value="" name="myfile" multiple="multiple"/>

<button id="uploader">Upload</button>

这种方法同样是可以的,只不过服务端解析的时候要更麻烦。

 

Javascript

<script type="text/javascript" src="html5uploader.js"></script>

    <script type="text/javascript">

     VAR uploader = document.getElementById(&#39;uploader');

        uploader.addEventListener("click", function(e) {

 

        H5Uploader.upload({

            action: 'upload',

            id: 'myfile0',

            Size: {

                max: 5000, // 5000kb 

                valide: function(e) {

                    if (e) {

                        alert("The size of " + e.name + " is exceed max value!");

                    }

                }

            }, // MB

            type: {

                name: 'csv;png;jpg',

                valide: function(e) {

                    if (e) {

                        alert("The type of " + e.name + " is not supported!");

                    }

                }

            },

            progress: function() {

                    var p = document.createElement('p');

                    p.innerHTML = "uploading";

                    p.id = "loading";

                    document.body.appendChild(p);

            },

            success: function(data) {

                alert(data);

                if (data && data == 200) {

                    document.getElementById('loading').innerHTML = "The file upload successfully!";

                    alert("The file upload successfully.");

                }

            },

            fail: function(data) {

 

            }

        });

 

    }, false);

    </script>

以上是针对单个input元素的上传,H5Uploader.upload()方法是支持Array类型和Object类型的,也就是说,如果你有多个input元素同时上传的需求的话,你可以这样写:

 

   uploader.addEventListener("click", function(e) {

 

        H5Uploader.upload([{

            action: 'upload',

            id: 'myfile0',

            size: {

                max: 5000, // 5000kb 

                valide: function(e) {

               }

            }, // MB

            type: {

                name: 'csv;json',

                valide: function(e) {

               }

            },

            progress: function() {

                               },

            success: function(data) {

            },

            fail: function(data) {

 

            }

        },{

            action: 'upload',

            id: 'myfile1',

            size: {

                max: 5000, // 5000kb 

                valide: function(e) {

               }

            }, // MB

            type: {

                name: 'png;jpg',

                valide: function(e) {

               }

            },

            progress: function() {

            },

            success: function(data) {

            },

            fail: function(data) {

 

            }

        }]);

 

    }, false);

Nodejs服务端

服务端是exPressjs,利用的一个上传中间件multer

 

var express = require('express');

var multer = require('multer');

var app = express();

var done = false;

 

app.use(express.static('./public'));

 

// respond with "hello world" when a GET request is made to the homepage

app.post('/upload',[multer({dest: './uploads/'}), function(req, res) {

    try {

        console.LOG(req.body.myfile);

        console.log(req.files);

        res.json(200);

    } catch (e) {

        console.log(e);

    }

}]);

完整的示例代码,请看

 

Java servlet示例

此处没有用任何框架或者库,只是Servlet3.0, 用tomcat6的同学要注意哦。

 

package com.h5uploader.demo;

 

import java.io.File;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.Multipartconfig;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.Part;

 

 

@MultipartConfig

public class UploaderServlet extends HttpServlet {

    

    public void service(HttpServletRequest req, HttpServletResponse res) 

            throws IOException, ServletException {

        

        res.setContentType("text/html;charset=UTF-8");

 

        // Create path components to save the file

        final String path = "/Users/ziv/Desktop/";

        final Part filePart = req.getPart("myfile0");

        final String fileName = getFileName(filePart);

 

        OutputStream out = null;

        InputStream filecontent = null;

        final PrintWriter writer = res.getWriter();

        

        try {

            out = new FileOutputStream(new File(path + File.separator

                    + fileName));

            filecontent = filePart.getInputStream();

 

            int read = 0;

            final byte[] bytes = new byte[1024];

 

            while ((read = filecontent.read(bytes)) != -1) {

                out.write(bytes, 0, read);

            }

            writer.println("New file " + fileName + " created at " + path);

           

        } catch (FileNotFoundException fne) {

            writer.println("You either did not specify a file to upload or are "

                    + "trying to upload a file to a protected or nonexistent "

                    + "location.");

            writer.println("<br/> ERROR: " + fne.getMessage());

 

            

        } finally {

            if (out != null) {

                out.close();

            }

            if (filecontent != null) {

                filecontent.close();

            }

            if (writer != null) {

                writer.close();

            }

        }

    }

    

    private String getFileName(final Part part) {

        final String partHeader = part.getHeader("content-disposition");

        for (String content : part.getHeader("content-disposition").split(";")) {

            if (content.trim().startsWith("filename")) {

                return content.substring(

                        content.indexOf('=') + 1).trim().replace("/"", "");

            }

        }

        return null;

    }

 

}

以上的上传示例是来自官方的代码,我个人也是测试过的,完整的示例

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-HTML5 文件异步上传 ― h5uploader.js全部内容,希望文章能够帮你解决javascript代码实例教程-HTML5 文件异步上传 ― h5uploader.js所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。