上传图片

POST数据,有几种方式可供选择:
1、使用表单进行图片上传

 <form id="upload-image" name="upload-image" action="./uplaodImage.php" enctype="multipart/form-data" method="post">
    <input type="file" name="image" class="webuploader-element-invisible" id="channel-pic" accept="image/*">
    <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);" for="channel-pic">
    </label>
    <input type="submit" value="确认上传图片" class="upload-image-btn" id="uploadImageBtn"/>
    <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);" class="upload-image-btn" for="uploadImageBtn"></label>
</form>

图片直接被上传到action属性所对应的后端

2、JavaScript实现图片上传及预览
JavaScript实现图片上传基于html5的新增属性FileReader。下面进行详细说明:
2.1、input标签

<input type="file" />

file值定义输入字段和“浏览”按钮,供文件上传使用.效果如下图:

2.2、html5新增API:FileReader
FileReader用来把文件读入内存,并且异步读取文件中的数据。可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
2.2.1、FileReader对象的实例所拥有的方法
拥有以下4个方法:
abort、readAsBinaryString、readAsDataURL、readAsText
这4个方法中abort用来中断读取:

var reader = new FileReader();
reader.abort();//无参数

其他3个用来读取文件.3个读取文件的方法,都不会返回读取结果,读取结果存储在result属性中.使用方法如下:
a)、readAsBinaryString
将文件读取为二进制码,可以用来传输到后端并存储.使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e){
    console.log(this.result);//读取结果存储在result属性中
}

b)、readAsDataURL
将文件读取为DataURL,以base64码进行读取,可以用来本地预览图片.使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
    console.log(this.result);//读取结果存储在result属性中
}

c)、readAsText
将文件读取为文本,以’utf-8’进行读取.使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e){
    console.log(this.result);//读取结果存储在result属性中
}

2.2.2、FileReader对象的实例所拥有的事件
拥有以下6个事件
onabort、onerror、onload、onloadend、onloadstart、onprogress
a)、onabort事件在中断读取文件时触发,使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.onabort = function(e){
    console.log(this.result);//读取结果存储在result属性中
}
reader.readAsDataURL(file);

b)、onerror事件在读取出错时触发,使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.onerror = function(e){
    console.log(this.result);//读取结果存储在result属性中
}
reader.readAsDataURL(file);

c)、onload事件在读取成功完成时触发,使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.onload = function(e){
    console.log(this.result);//读取结果存储在result属性中
}
reader.readAsDataURL(file);

d)、onloadend事件在读取完成时触发,读取可能成功也可能失败,使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.onloadend = function(e){
    console.log('已经读取完成',this.result);//读取结果存储在result属性中
}
reader.readAsDataURL(file);

e)、onloadstart事件在读取开始时触发,使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.onloadstart = function(e){
    console.log('开始读取',this.result);//读取结果为空
}
reader.readAsDataURL(file);

f)、onprogress事件在读取过程中触发,使用方法如下:

var file = document.getElementById('uploadImage').files[0];
var reader = new FileReader();
reader.onprogress = function(e){
    console.log('读取过程中',this.result);//读取结果存储在result属性中,执行一次
}
reader.readAsDataURL(file);

2.3、完整实现图片本地预览并上传方法



3、使用jquery.form.js上传图片
3.1上传API:ajaxSubmit
3.2、完整实现选中图片本地预览并立即上传

<html>
<head>
    <title>jquery.form.js上传图片效果演示</title>
    <script src="./jquery.js"></script>
    <script src="./jquery.form.js"></script>
</head>
<body>
    <img src="" class="imageContent"/>
    <form action="./image" method="post" enctype="multipart/form-data"  id="testUpload">
        <input type="file" name="image" accept="image/*"/>
    </form>
    <script>
        var $input = $('input[name=image]');
        
        $input.on('change',function(e){
            if(window.FileReader){
                var fr = new FileReader();
                fr.onloadend = function(ret){
                    $('.imageContent').attr('src',ret.target.result);
                    $('.imageContent').width('200px')
                    $('.imageContent').height('200px')
                }
                fr.readAsDataURL($(e.target.files)[0]);
            }
            $('#testUpload').ajaxSubmit({
                type: 'post',
                dataType: 'json',
                url: $('#testUpload').attr('action'),
                success: function (ret) {
                    alert('上传图片成功!');
                },
                error:function(e){
                    alert('上传图片失败!');
                }
            })
            return false;
        });
    </script>
</body>
</html>

点击查看源码

此条目发表在PHP分类目录。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注