html上传图片

上传图片是一个经常能用到的功能，比如，用户修改自己的图像，后台模块新增操作也经常涉及到图片上传。只要会涉及到图片上传，很多人可能会想到的是插件，然后都已经html5啦，已经有简单的写法了哟。下面就来看看吧~

html部分的代码

    <input type="file" name="image" id="uploadFile" style="display:none;">
    <input type="hidden" name="img">
    <button type="button" class="beatiful" id="uploadBtn">上传图片</button>  
    <div><img src="" class="img-show"></div>
复制代码

javascript部分的代码

    //因为html自带的图片上传贼丑，所以这里用按钮来代替。
    $('#uploadBtn').click(function() {
        $('#uploadFile').click()
        //当图片选中后，会触发name=file文本的change事件
        $('#uploadFile').change(function() {
            var formData = new FormData()
            formData.append('image', this.files[0])
            if(formData) {
                $.ajax({
                    url: '/admin/photos',
                    type: 'POST',
                    data: formData,
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        if(res.status == 0) {
                            alert(res.msg)
                            return false    
                        }
                        $('input[name="img"]').val(res.msg)
                        $('.img-show').attr('src', res.msg)
                    }
                })
            }
        })
    })
复制代码

这样就把图片上传到后台了。 完工~