图片预览及上传简单Demo

HTML结构如下，并未写css，样式主要根据项目情况进行设置
<body>
	<div class="wrap">
	    <img alt="">
	</div>
	<input style='display: none' id='upload-file' type="file" onchange='fileChange(this)'>
	<button onclick='uploadImg()'>上传图片</button>
	<button onclick='saveImg()'>保存图片</button>
</body>

js代码如下

//点击自定义按钮调用input[name+"file"]的click事件
    function uploadImg() {
        $('#upload-file').click()
    };

    //预览图片
    function fileChange(file) {
        if(file.files[0]) {
            console.log(1);
            var reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function (event) {
                $('.wrap img').attr('src', event.target.result)
            }

        }
    }
    
    //保存图片
    function saveImg() {
        var formdata = new FormData();
        var images = $('#upload-file').get(0).files[0];
        if(images == undefined) {
            return false
        } else {
            formdata.append('image', images);

            $.ajax({
                url: 'url',
                type: 'post',
                data: formdata,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res);
                }
            })
        }
    }
posted @ 2017-06-22 13:52  吴琼  阅读(263)  评论(0)  编辑  收藏  举报