AJAX异步上传图片预览

css样式就不上传了,样式自行调整,使用对应的ID名称即可使用

html代码

js代码

        //图片预览
        $('#n-file').change(function () {
            var headeimg = '';
            var file = $(this)[0].files[0];
            //通过FileReader读取选中图片
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //result中存放了选中的文件的二进制数据
                $('.l-eimg').css('background-image',"url("+this.result+")");
            }

            var formData = new FormData()
            formData.append('headeimg', file);
            formData.append('file_name', 'headeimg');
            $.ajax({
                type: "POST",
                url: "服务器图片上传路径",
                data: formData,
                processData: false,
                contentType: false,
                success: function (e) {
                    console.log(e)
                },
            })
        });

 

你可能感兴趣的:(html,php,上传,jquery,js,html,html5)