怎么用html上传而不

HTML5方式上传文件，可以通过使用FormData类模拟Form表单提交，从而实现无刷新上传文件。

假设有一个文件选择框

[html] view plain copy

<input type="file" name="pic" id="pic" accept="image/gif" />

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<form name="upload">

    <input type="file" name="pic">

</form>

<script>

    $('form[name="upload"]').submit(function(){

        //HTML5表单对象,FormData(表单DOM节点)

        var formData = new FormData(this)

        //ajax(服务器地址, 参数).done(回调)

        $.ajax('http://localhost', {

            type: 'POST',

            dataType: 'JSON',

            data: formData,

            processData: false,

            contentType: false

        }).done(function(e){

            //让服务器返回一个储存图片的路径给你，然后你再把他加入到canvas中

            //假如返回的就是一个URL字符串'http://localhost/canvas.jpg'

            //执行把图像加入到canvas中的方法

            //Orz我canvas很菜所以我没办法告诉你怎么再把图片加入到canvas中,我只能告诉你怎么加入到上下文中

            document.body.innerHTML = '<img src="' + e + '">'

        })

        return false    //阻止form表单默认提交会刷新页面

    })

</script>

分析问题：表单上传然后还要成功后在canvas中显示。

方案：采用Ajax提交图像，这样可以做到无刷新上传和无刷新在canvas中显示

Ajax为了降低代码难度和提高兼容性采用jQuery库编写好的Ajax上传。

---