jquery落成上传图片本地预览效果,拖拽异步上传达成

by admin on 2019年1月31日

File杂文——拖拽上传前传

2015/07/24 · HTML5 ·
拖拽上传

原稿出处: 百码山庄   

在《File杂谈——初识file控件》一文中,大家已经对file控件有了初始的询问,并且对创设一个视觉和体验一致的file控件做了相比详细的印证,明天咱们后续掌握file控件的更加多特点,并延长出更加多。

File诗歌——拖拽异步上传完成

2015/07/25 · HTML5 ·
异步上传

原文出处: 百码山庄   

在前一篇小说《File随笔——拖拽上传前传》中本人制作了一个静态的拖拽上传界面,拖拽文件到体现区域释放,可以浮现拖入文件的主旨音讯。本文将在此基础上尤为加工,营造一个完好无损的拖拽上传示例。

当我们在上传文件时只要老是都要上盛传服务器才方可预览这几个做看上合理其实是不客观的,若是网速慢或图表有难点,那样不仅浪费客户时间还要也浪费服务器资源了,上边大家介绍利用js上传图片时当地完毕预览,希望此方法对各位有所协理啊。

     
拖拽(Drag/Drop)是个要命常见的机能。你可以挑动一个对象,并且拖动到你想放置的区域。
很多javascript都就如完结了连带的功效,例如,jQueryUI的drag and
drop组件。在HTML5中,拖拽(drag and
drop)成为了正式操作,任何因素都支持。正因为那一个职能太常见了,所有的主流浏览器都支持这几个操作。

新增属性

在HTML5到来此前,绝半数以上景况下利用file控件,大家前端工程师须要的有用音讯都不得不通过value属性获得的公文名字符串来收获(比如:文件类型、文件的直接名称等),这些很不便宜,多文本上传的时候就进一步劳顿了。别的,大家想不通过其余手段得到上传文件的轻重更是一种奢望。

但是,好在那所有并没有那么糟,随着HTML5的赶到,file控件上新增了files属性。该属性包含了file控件拔取的文书对象集合,每个文件对象涵盖了近年来文件的中央新闻(类型、名称、大小)等,这样一来大家再也不用利用正则啊,字符串拆分啊,等等麻烦的艺术去得到大家想要的新闻了。下边我们在Chrome的控制台看下files属性的协会。我的测试方法是那般的:

第一,使用Chrome浏览器随便打开一个网页,然后F12调出开发工具,接着在Console中输入:

JavaScript

document.body.innerHTML = ‘<input type=”file” id=”J_File”>’; var
f = document.getElementById(‘J_File’); f.onchange = function() {
console.log(this.files); };

1
2
3
4
5
document.body.innerHTML = ‘<input type="file" id="J_File">’;
var f = document.getElementById(‘J_File’);
f.onchange = function() {
    console.log(this.files);
};

那时候页面会被替换成一个file控件,点击选拔一个或多少个(三个须求在input标签上扩充multiple属性)本地文件,那时change事件将会被触发,控制台将会输出一下数据:

必发88 1

显明,files属性的值是一个FileList类型的目的,它和数组类似,同样享有length属性,而且大家也足以向来使用循环去赢得每一个文件(File)对象(例:取第三个文本就是files[0])。我们后续看每个文件对象中蕴藏的音讯,我们常用的name、size、type等宏观了,突然感觉好高大上。

不过,我要报告我们的是,大家也不可以专横跋扈的采纳file控件的files属性,因为它在IE9及以下版本的IE浏览器中是不存在的,我们须要运用其它的招数(flash等)来弥补那几个标题,这里就不进行了。

示范表达

点击区域选用文件或直接将文件拖入区域,触发文件上传成效,文件将异步发送到服务器。待服务端处理完了后归来基本音信,在页面中显得。由于服务器容量难题,本示例未做文件保留处理,只是简短的将文件中央音讯再次回到,文件上传的后端具体处理逻辑要求活动补充。

原理

启用拖拽 – draggable属性      
极度不难,只需求将一个要素的拖动属性修改为draggable,那个元素就帮忙拖动了,如下所示:

file控件的身份遭遇恐吓

趁着files属性的产出,file控件的地点分明赢得了很好的升官,可是那并不代表它的身份进一步巩固。随着HTML5二来的,并不唯有file控件的files属性。大家已经得以在愈多的网站上得以见到拖拽上传这几个一个新式并且更适合用户作为的交互功效。那里我先不说拖拽上传功用的完结,大家先一起来看看另一种得到FileList对象的点子。

首先,大家须求一个拖拽上传的静态界面,细节不多说,直接上代码:

XHTML

<style> * {margin: 0;padding: 0;} .up-area {margin: 50px
auto;border: 1px dashed #ccc;background-color: #eee;width:
600px;height: 400px;line-height: 400px;text-align: center;color:
#666;cursor: pointer;} .up-area:hover {background-color: #ddd;}
</style> <input type=”file” name=”” id=”J_UploadFile”
style=”display: none;”> <div class=”up-area”
id=”J_UploadArea”> 点击那里或拖入文件进行上传 </div>
<script> (function(){ var area =
document.getElementById(“J_UploadArea”), file =
document.getElementById(“J_UploadFile”); function uploadFile(fs) {
console.log(fs); } area.onclick = function() { console.log(‘click’);
file.click(); }; file.onchange = function() { uploadFile(this.files); };
area.ondragenter = function(ev) { this.className = ‘up-area hover’;
ev.preventDefault(); }; area.ondragover = function(ev) {
ev.preventDefault(); }; area.ondrop = function(ev) {
ev.preventDefault(); console.log(‘drop’); var dt = ev.dataTransfer;
this.className = ‘up-area’; uploadFile(dt.files); }; })();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
    * {margin: 0;padding: 0;}
    .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;}
    .up-area:hover {background-color: #ddd;}
</style>
<input type="file" name="" id="J_UploadFile" style="display: none;">
<div class="up-area" id="J_UploadArea">
    点击此处或拖入文件进行上传
</div>
<script>
(function(){
    var area = document.getElementById("J_UploadArea"),
        file = document.getElementById("J_UploadFile");
    function uploadFile(fs) {
        console.log(fs);
    }
    area.onclick = function() {
        console.log(‘click’);
        file.click();
    };
    file.onchange = function() {
        uploadFile(this.files);
    };
    area.ondragenter = function(ev) {
        this.className = ‘up-area hover’;
        ev.preventDefault();
    };
    area.ondragover = function(ev) {
        ev.preventDefault();
    };
    area.ondrop = function(ev) {
        ev.preventDefault();
        console.log(‘drop’);
        var dt = ev.dataTransfer;
        this.className = ‘up-area’;
        uploadFile(dt.files);
    };
})();
</script>

在线Demo。将文件拖入灰色区域释放便得以在页面上看到文件音信。

密切的意中人或者早就意识了,其实大家那边又提供了优化file控件的别的一种方法——完全采取另一个标签替代,在该标签的click事件中积极触发file控件的click事件,正如上边代码中的: file.click() 。不过,那不是本文的根本。

大家仔细看下边代码中的最后一段,即ondrop的事件处理函数,大家的files对象并不是出自file控件,而是一个叫dataTransfer的东西。那么大家是还是不是足以大胆的估量,拖拽上传功效其实可以完全抛开file控件独立完结?那里先留个悬念,大家今后再议论。

jquery落成上传图片本地预览效果,拖拽异步上传达成。在地点的案例中大家因此点击来挑选文件从而赢得FileList对象,和经过将文件拖拽到黄色区域来赢得FileList对象,那两种艺术虽不一样,但大家赢得的多寡确是一样的,那足以验证file控件不再独裁,它的地位已经日趋先河面临勒迫。

1 赞 1 收藏
评论

必发88 2

新的同伴FormData

大家驾驭,传统的文书上传如果要兑现异步的意义,大家会采纳iframe去模拟,或利用flash上传插件。但是前天,大家又认识了一位新成员——FromData,它可以通过js创制表单对象,并得以向该目的中丰裕表单数据(字符串、数字、文件等)。再结合我们耳熟能详的XMLHttpRequest对象,将表单数据异步提交到服务端,那样大家的难点就解决了。

上面,大家来看下核心代码:

JavaScript

function uploadFile(fs) { var len = fs.length; for (var i = 0; i <
len; i++) { sendFile(fs[i]); } } function sendFile(file) { var xhr =
new XMLHttpRequest(), fd = new FormData(); fd.append(‘file’, file);
xhr.onreadystatechange = function() { if (xhr.readyState == 4 &&
xhr.status == 200) { // 将服务端重返音讯输出到日志区(考虑多文件情状)
consoleDiv.innerHTML += ‘<br>’ + xhr.responseText; } };
xhr.open(‘POST’, ‘./upload.php’); xhr.send(fd); } //
文件控件暴发变化时,调用uploadFile函数,触发上传作用 file.onchange =
function() { uploadFile(this.files); }; //
在区域内释放拖入文件时,调用文件上传函数 area.ondrop = function(ev) {
ev.preventDefault(); var dt = ev.dataTransfer; uploadFile(dt.files); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function uploadFile(fs) {
    var len = fs.length;
    for (var i = 0; i < len; i++) {
        sendFile(fs[i]);
    }
}
function sendFile(file) {
    var xhr = new XMLHttpRequest(),
        fd = new FormData();
    fd.append(‘file’, file);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 将服务端返回信息输出到日志区(考虑多文件情况)
            consoleDiv.innerHTML += ‘<br>’ + xhr.responseText;
        }
    };
    xhr.open(‘POST’, ‘./upload.php’);
    xhr.send(fd);
}
// 文件控件发生变化时,调用uploadFile函数,触发上传功能
file.onchange = function() {
    uploadFile(this.files);
};
// 在区域内释放拖入文件时,调用文件上传函数
area.ondrop = function(ev) {
    ev.preventDefault();
    var dt = ev.dataTransfer;
    uploadFile(dt.files);
};

代码很简短,不再做过多解说。可是此间自己想揭橥一点私家观点:根据示例大家不难察觉有这样一个标题——如若用户都施用拖拽上传功用,而不选取点击触发File控件拔取文件上传,那么File控件完全没有存在的必需。联系上文中本人提到的File控件的地位碰着威胁这一见解,我敢于的考虑,即使将来的某一项正式中给各种HTMLElement揭露一个选用文件的效应接口,那么拖拽和点选功效将得以集于一个因素之上,到那时File控件的地位恐怕不仅仅是惨遭胁制,很有可能退出历史舞台!出于File控件视觉效果和相互不联合的角度去考虑,我觉着以上估量仍旧有可能的,哈哈~~

即使示例并未在后端做太多做事,我那边仍然以PHP为例,说明一下后端该怎么办事。单从示例而言,我的代码是那般的:

PHP

$file = $_FILES[‘file’]; echo json_encode($file);

1
2
$file = $_FILES[‘file’];
echo json_encode($file);

可以算得卓殊简单了。而我辈在实质上采纳中一再还会涉及越来越多更复杂的拍卖逻辑。最起码的大家应该要将tmp_name对应的临时文件移动到我们指定的上传目录吧。当然,这一经过大家就会对文件类型举行判定,大小限制,重命名,数据保存,等等。基本代码:

PHP

$file = $_FILES[‘file’]; $path = ‘./upload’; if ($file[‘size’] >
2000000) { echo ‘{“error”: “1000”, “message”:
“上传文件大小超限,无法当先xxM”}’; } $path .= ‘/file_’ . time() .
‘.png’; // 这里还可能会设有文件数量保存,新旧名称关联等逻辑
move_uploaded_file($file[‘tmp_name’], $path);

1
2
3
4
5
6
7
8
$file = $_FILES[‘file’];
$path = ‘./upload’;
if ($file[‘size’] > 2000000) {
    echo ‘{"error": "1000", "message": "上传文件大小超限,不能超过xxM"}’;
}
$path .= ‘/file_’ . time() . ‘.png’;
// 这里还可能会存在文件数据保存,新旧名称关联等逻辑
move_uploaded_file($file[‘tmp_name’], $path);

分为两步:当上传图片的input被触发并采用地面图片之后获得要上传的图纸这一个目的的URL(对象URL);把对象URL赋值给事先写好的img标签的src属性即可把图纸体现出来。

<img draggable=”true” /> 

一个神奇的点子sendAsBinary

后边我们聊到的施用FormData来贯彻公文异步上传,在高档浏览器中都能正常运作,没有太大难点。接下来大家别的一个在Firefox完成异步上传的方法。那一个方法,大家又会提交一个新的情侣——FireReader。FileReader是HTML5新增的一个对象,它可以访问用户本地文件,并且可以以不一样格式读取文件内容。

在此地,大家需求精通Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

拖动中数量的传递

FileReader基本使用

第一大家来看一下什么成立一个FileReader实例对象,以及它拥有怎么着实例方法。在js中创制一个File里德r对象很不难:

JavaScript

var reader = new FileReader();

1
var reader = new FileReader();

jquery落成上传图片本地预览效果,拖拽异步上传达成。大家可以经过reader对象访问当地文件,那么reader对象拥有怎么样我们常用的特性、事件和措施吗?请看之下列表:

File对象

     
拖动的经过中,大家反复需求传递相应的逻辑数据来形成更换的历程,那里根本是采纳dataTransfer对象开展数量传递,上面先看看它的分子:
方法成员:

事件

  • onload :文件成功读完时触发
  • onloadend :文件读完时触发,无论成功与否
  • onloadstart :开首读取文件时接触
  • onprogress :文件读取中,常用于获取读取进度
  • onabort :文件读取操作停顿
  • onerror :文件读取出错

File对象足以用来取得某个文件的新闻,还足以用来读取这些文件的内容.平常情况下,File对象是来源于用户在一个input元素上摘取文件后再次来到的FileList对象,也能够是来自由拖放操作生成的
DataTransfer对象.

setData(format, data):把被拖动的数量赋值给dataTransfer对象。

属性

  • result :读取到的文书内容,当读取操作落成后生效
  • readyState :FileReader对象的当下气象
  • error :出错时的错误音信

上面来看收获FileList对象:

     
format:一个String型参数,指定被拖动数据的项目。该参数取值可以是“Text”(文本类型)和“URL”(URL类型)。该参数是高低写毫不相关的,所以传入”text”与”Text”是同一的。
     
data:一个变体类型参数,指定被拖动的数据。该多少足以是文本,图片路径,URL等等。
     
该函数有Boolean类型的重回值,true表示数据成功加到dataTransfer中,false代表不成功。假设要求,可以通过这一个参数来决定是或不是应当继续执行某些逻辑。

方法

  • abort :中断文件读取操作
  • readAsBinaryString :将文件内容读取为二进制格式
  • readAsDataURL :将文件内容读取为DataURL格式,经常所说的base64格式
  • readAsText :将文件内容读取为文本

如上就是FileReader对象最常用的始末,下边大家先看一个小例子:

JavaScript

var rd = new FileReader(); rd.onload = function(ev) {
console.log(ev.target.result); }; rd.readAsText(file);

1
2
3
4
5
var rd = new FileReader();
rd.onload = function(ev) {
    console.log(ev.target.result);
};
rd.readAsText(file);

上述代码中的file参数是一个file对象,可以使File控件的files属性中FileList的一个,也得以是dataTransfer中files属性中FileList的一个。

 代码如下

getData(format):获取dataTransfer中存放的拖动数据。

FileReader + sendAsBinary落成异步上传

认识了Fire里德r,下边我们来看一下在Firefox中如何行使FileReader和XMLHttpRequest的sendAsBinary方法完成公文异步上传。宗旨代码如下:

JavaScript

function sendByBinary(file) { var xhr = new XMLHttpRequest(), reader =
new FileReader(); xhr.onreadystatechange = function() { if
(xhr.readyState == 4 && xhr.status == 200) { consoleDiv.innerHTML +=
‘<br>’ + xhr.responseText; } }; xhr.overrideMimeType(‘text/plain;
charset=x-user-defined-binary’); xhr.open(‘POST’, ‘./upload.php’);
reader.onload = function(ev) { // 将二进制内容发送至服务端
xhr.sendAsBinary(ev.target.result); }; // 将文件内容读取为二进制格式
reader.readAsBinaryString(file); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function sendByBinary(file) {
    var xhr = new XMLHttpRequest(),
        reader = new FileReader();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            consoleDiv.innerHTML += ‘<br>’ + xhr.responseText;
        }
    };
    xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’);
    xhr.open(‘POST’, ‘./upload.php’);
    reader.onload = function(ev) {
        // 将二进制内容发送至服务端
        xhr.sendAsBinary(ev.target.result);
    };
    // 将文件内容读取为二进制格式
    reader.readAsBinaryString(file);
}

代码很粗略,跟FormData的主意大多,大家跟着看服务端将什么获取POST过去的文本内容(以PHP为例):

PHP

// 方法一,这一个法子要求php.ini开启帮忙 $content =
$GLOBALS[‘HTTP_RAW_POST_DATA’]; //
方法二,不须求php.ini设置,内存压力小 $content =
file_get_contents(‘php://input’);

1
2
3
4
5
// 方法一,这个方法需要php.ini开启支持
$content = $GLOBALS[‘HTTP_RAW_POST_DATA’];
 
// 方法二,不需要php.ini设置,内存压力小
$content = file_get_contents(‘php://input’);

由此综合起来相比较保障的点子:

PHP

$content = $GLOBALS[‘HTTP_RAW_POST_DATA’]; if (empty($content)) {
$content = file_get_contents(‘php://input’); } echo $content; //
输出文件内容

1
2
3
4
5
$content = $GLOBALS[‘HTTP_RAW_POST_DATA’];
if (empty($content)) {
    $content = file_get_contents(‘php://input’);
}
echo $content; // 输出文件内容

大家暂且不说sendAsBinary那种措施当下只有Firefox协助,单从服务器获得文件内容后该如何处理的话,这种格局显明并未使用FormData的法子有优势。因为服务端仅仅获得了文本内容,并没有文件类型和分寸等新闻,对有些限量逻辑和文书存储的落到实处很不协调。

1 赞 2 收藏
评论

必发88 3

复制代码

     
format意义与setData中的一样,取值可以是”Text”(文本类型)和”URL”(URL类型)。

<script type=”text/javascript” src=”jquery.js”></script>

clearData(format):移除指定项目标多少。

<input id=”upload” type=”file”>
<img id=”preview” src=””>

     
那里的format除了地点可以指定的”Text”(文本类型)和”URL”(URL类型)外,还是可以取下列值:file

<script type=”text/javascript”>
$(‘#upload’).change(function(){
    // 获取FileList的率先个元素
    alert(document.getelementbyid(‘upload’).files[0]);
});
</script>

  • 文件,html – html元素,image – 图片。
          那一个主意可以用来去采纳性的处理拖动的数据类型。
     

Blob对象

特性成员:

一个Blob对象就是一个包蕴有只读原始数据的类公事对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的效益,并且增添协助了用户电脑上的地点文件.

effectAllowed:设置或获取数据源元素中的数据可以举办的操作。

咱俩想要得到的对象URL实际上即使从Blob那一个目的得到的,因为File的接口继承Blob。上面就来把Blob对象转换成URL:

      属性类型为字符串,取值范围如下:
          “copy”-复制数据.
          “link”-链接数据.
          “move”-移动数据
          “copyLink”-复制或链接数据,由目的对象来规定。
          “copyMove”-复制或位移多少,由目标对象来确定。
          “linkMove”-链接或挪动多少,由目标对象来规定。
          “all”-所有的操作都是支撑的。
          “none”-禁止拖动。
          “uninitialized”-默许值,选取默许的一举一动。
     
注意设置effectAllowed为none未来,拖动是不准的,可是鼠标形状照旧显得没有可拖动的靶子的形象,要是想不显示这几个鼠标形状,则需求将window的event事件的属性returnValue设置为false。

 代码如下

dropEffect:设置或得到拖动的对象上同意的操作以及相关的鼠标形状。

复制代码

      属性类型为字符串,取值范围如下:
         “copy”-鼠标展现为复制时的形态;
         “link”-鼠标突显为连日来的形制;
         “move”-鼠标突显为活动的形状。
         “none”(默许值)-鼠标彰显为没有拖动的形象。
     
effectAllowed指定了数据源支持的操作,所以普通在ondragstart事件中指定。dropEffect指定了拖动放置的目的帮忙的操作,所以与effectAllowed合作,平常在拖动的对象上的
ondragenter, ondragover和ondrop等事件中选拔。

<script type=”text/javascript”>
var f = document.getelementbyid(‘upload’).files[0];
var src = window.URL.createObjectURL(f);
document.getElementById(‘preview’).src = src;
</script>

files:重临拖动的文本的列表FileList。
types:ondragstart中发送的数目(被拖动的数码)类型的列表。

一个比较完好的实例

     
dataTransfer对象的存在,使得在拖动的数据源和目的元素之间传递逻辑数据变成了也许。日常大家运用setData方法在多少源元素的ondragstart事件中提供数据,然后再目的元素中,使用getData方法获取数据。

 

 

 代码如下

拖动中触发的事件      
上面是一遍拖拽会暴发的事件,基本上事件的触及顺序也就是上面的一一:

复制代码

dragstart:要被拖拽的元素开端拖拽时接触,这些事件目的是被拖拽元素。
drag:拖拽元素时接触,那个事件目的是被拖拽元素。
dragenter:拖拽元素进入目标元素时接触,那个事件目的是目的元素。
dragover:拖拽某元素在目标元素上移步时接触,这么些事件目的是目的元素。
dragleave:拖拽某元素离开目标元素时接触,这么些事件目的是目的元素。
drop:将被拖拽元素放在目的元素内时触发,这一个事件目标是目标元素。
dragend:在drop之后触发,就是拖拽完结时触发,那个事件目的是被拖拽元素。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>HTML5 Upload</title>
<style type=”text/css”>
        #destination{
           
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
        }
</style>

     
基本上事件的参数event都会传出相关的要素,可以很有益的进展局部改动。那里,大家并不须要处理每个事件,平常只必要挂接紧要的多少个事件即可。

<!–<script type=”text/javascript”
src=”;
<script type=”text/javascript”
src=”;
<script type=”text/javascript”>
//处理file input加载的图纸文件
$(document).ready(function(e) {
 //判断浏览器是或不是有FileReader接口
 if(typeof FileReader ==’undefined’)
 {
   
$(“#destination”).css({‘background’:’none’}).html(‘亲,您的浏览器还不支持HTML5的FileReader接口,不可能利用图片本地预览,请更新浏览器得到无限体验’);
  //即使浏览器是ie
  if($.browser.msie===true)
  {
   //ie6间接用file input的value值本地预览
   if($.browser.version==6)
   {
       $(“#imgUpload”).change(function(event){      
       //ie6下怎么办图片格式判断?
       var src = event.target.value;
       //var src = document.selection.createRange().text;  //选中后
selection对象就爆发了 那么些目的只适合ie
       var img = ‘<img src=”‘+src+'” width=”200px” height=”200px”
/>’;
       $(“#destination”).empty().append(img);
      });
   }
   //ie7,8用到滤镜本地预览
   else if($.browser.version==7 || $.browser.version==8)
   {
    $(“#imgUpload”).change(function(event){
       $(event.target).select();
       var src = document.selection.createRange().text;
       var dom = document.getElementById(‘destination’);
       //使用滤镜 成功率高
      
dom.filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader’).src=
src;
       dom.innerHTML = ”;
       //使用和ie6相同的情势 设置src为相对路径的方法 有些图片不可能出示
效果没有选择滤镜好
       /*var img = ‘<img src=”‘+src+'” width=”200px” height=”200px”
/>’;
       $(“#destination”).empty().append(img);*/
     });
   }
  }
  //固然是不扶助FileReader接口的低版本firefox 可以用getAsDataURL接口
  else if($.browser.mozilla===true)
  {
   $(“#imgUpload”).change(function(event){
    //firefox2.0未曾event.target.files这几个属性 如同ie6那样采取value值
然而firefox2.0不扶助相对路径嵌入图片 废弃firefox2.0
    //firefox3.0始发具有event.target.files这么些属性
并且初叶扶助getAsDataURL()那一个接口 一贯到firefox7.0扫尾
可是事后都足以用HTML5的File里德r接口了
    if(event.target.files)
    {
      //console.log(event.target.files);
      for(var i=0;i<event.target.files.length;i++)
      { 
         var img = ‘<img
src=”‘+event.target.files.item(i).getAsDataURL()+'” width=”200px”
height=”200px”/>’;
       $(“#destination”).empty().append(img);
      }
    }
    else
    {
     //console.log(event.target.value);
     //$(“#imgPreview”).attr({‘src’:event.target.value});
    }
    });
  }
 }
 else
 {
  // version 1
  /*$(“#imgUpload”).change(function(e){
    var file = e.target.files[0];
    var fReader = new FileReader();
    //console.log(fReader);
    //console.log(file);
    fReader.onload=(function(var_file)
    {
     return function(e)
     {
     
$(“#imgPreview”).attr({‘src’:e.target.result,’alt’:var_file.name});
     }
    })(file);
    fReader.readAsDataURL(file);
    });*/
   
    //单图上传 version 2
    /*$(“#imgUpload”).change(function(e){
       var file = e.target.files[0];
       var reader = new FileReader(); 
    reader.onload = function(e){
     //displayImage($(‘bd’),e.target.result);
     //alert(‘load’);
     $(“#imgPreview”).attr({‘src’:e.target.result});
    }
    reader.readAsDataURL(file);
     });*/
    //多图上传 input file控件里指定multiple属性 e.target是dom类型
     $(“#imgUpload”).change(function(e){ 
       for(var i=0;i<e.target.files.length;i++)
        {
         var file = e.target.files.item(i);
      //允许文件MIME类型 也可以在input标签中指定accept属性
      //console.log(/^image/.*$/i.test(file.type));
      if(!(/^image/.*$/i.test(file.type)))
      {
       continue;   //不是图片 就跳出那三遍巡回
      }
      
      //实例化FileReader API
      var freader = new FileReader();
      freader.readAsDataURL(file);
      freader.onload=function(e)
      {
       var img = ‘<img src=”‘+e.target.result+'” width=”200px”
height=”200px”/>’;
       $(“#destination”).empty().append(img);
      }
        }
      });
     
    //处理图片拖拽的代码
    var destDom = document.getElementById(‘destination’);
    destDom.addEventListener(‘dragover’,function(event){
     event.stopPropagation();
     event.preventDefault();
     },false);
    
    destDom.addEventListener(‘drop’,function(event){
     event.stopPropagation();
     event.preventDefault();
     var img_file =
event.dataTransfer.files.item(0);    //获取拖拽过来的文本音讯暂时取一个
     //console.log(event.dataTransfer.files.item(0).type);
     if(!(/^image/.*$/.test(img_file.type)))
     {
      alert(‘您还未拖拽任何图片过来,或者您拖拽的不是图形文件’);
      return false;
     }
     fReader = new FileReader();
     fReader.readAsDataURL(img_file);
     fReader.onload = function(event){
      destDom.innerHTML=”;
      destDom.innerHTML = ‘<img src=”‘+event.target.result+'”
width=”200px” height=”200px”/>’; 
      };
    },false);
 }
});
</script>
</head>

拖动开头 – ondragstart事件      
从那一个事件传入的参数含有的音信十分丰盛,从中可以很有益的得到到被拖动的元素(event.Target);从中可以设置被拖动数据(event.dataTransfer.setData);所以你可以很有益于完结拖动的暗中逻辑(当然你绑定的时候也得以传递其余的参数)。
拖动进程中 – ondrag,ondragover,ondragenter和ondragleave事件      
ondrag事件的目的是被拖拽元素,平常那些事件处理的比较少。ondragenter事件是当拖动进入当前因素时发生,ondragleave事件是在当拖动离开当前元素时发生,ondragover事件是在拖动在时下元素中活动时发出。
     
这里只需要留意一点,因为默认情况下,浏览器是不准元素drop的,所以为了让要素得以drop,须要在这些函数中回到false或者调用event.preventDefault()方法。如上边的事例所示。
拖动截至 – ondrop,ondragend事件      
当可拖动的数目被drop的时候,drop事件触发。drop停止后,dragend事件被触发,那些事件选用的也相对少一点。

<body>
<input type=”file” id=”imgUpload” name=”imgUpload” draggable=”true”
single/>  <!–允许file控件接受的文件类型–>
<!–<input type=”file” id=”imgUpload” name=”imgUpload”
accept=”image/*” multiple/>–>
<div id=”destination” style=”width:200px;height:200px;border:1px
solid #000000;”><img src=”nopic.jpg” /></div>
</body>
</html>

      看一个简易的事例:

兼容性

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
  function allowDrop(ev){
    ev.preventDefault();
  }
  function drag(ev){
    ev.dataTransfer.setData(“Text”,ev.target.id);
  }
  function drop(ev){
    var data=ev.dataTransfer.getData(“Text”);
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>
</head>
<body>
  <div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
  <img id=”drag1″ src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″ />
</body>
</html>

•上述情势适用于chrome浏览器
•若是是IE浏览器可以平昔选拔input的value来代替src
•网上查看资料有从来使用File对象的getAsDataURL()方法获得URL的,现在以此方式都早就撤消,类似的还有getAsText()和getAsBinary()方法;

 

文本拖拽      
上边的例证已经应用了dataTransfer的各个措施和特性,上边再看网上的其它一个有趣的使用:拖拽一个图纸到网页上,然后在网页上显得。这么些应用使用了dataTransfer的files属性。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset=”utf-8″>
    <title>HTML5拖放文件</title>
    <style>
  #section{font-family: “Georgia”, “微软雅黑”, “华文中宋”;}
        .container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3px solid #ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
  .preview{max-width:360px;}
  #files-list{position:absolute;top:0;left:500px;}
  #list{width:460px;}
  #list .preview{max-width:250px;}
  #list p{color:#888;font-size:12px;}
  #list .green{color:#09c;}
    </style>
</head>
<body>
    <div id=”section”>
        <p>把你的图形拖到上面的器皿内:</p>
        <div id=”container” class=”container”>
必发88 ,        </div>
  <div id =”files-list”>
   <p>已经拖进过来的公文:</p>
   <ul id=”list”></ul>
  </div>
    </div>
 <script>
 if (window.FileReader) {
  var list = document.getElementById(‘list’),
   cnt = document.getElementById(‘container’);

  // 判断是还是不是图片
  function isImage(type) {
   switch (type) {
   case ‘image/jpeg’:
   case ‘image/png’:
   case ‘image/gif’:
   case ‘image/bmp’:
   case ‘image/jpg’:
    return true;
   default:
    return false;
   }
  }

  // 处理拖放文件列表
  function handleFileSelect(evt) {
   evt.stopPropagation();
   evt.preventDefault();

   var files = evt.dataTransfer.files;
   for (var i = 0, f; f = files[i]; i++) {
    var t = f.type ? f.type : ‘n/a’,
     reader = new FileReader(),
     looks = function (f, img) {
      list.innerHTML += ‘<li><strong>’ + f.name + ‘</strong> (‘ + t +
       ‘) – ‘ + f.size + ‘ bytes<p>’ + img + ‘</p></li>’;
      cnt.innerHTML = img;
     },
     isImg = isImage(t),
     img;

    // 处理获得的图样
    if (isImg) {
     reader.onload = (function (theFile) {
      return function (e) {
       img = ‘<img class=”preview” src=”‘ + e.target.result + ‘” title=”‘ + theFile.name + ‘”/>’;
       looks(theFile, img);
      };
     })(f)
     reader.readAsDataURL(f);
    } else {
     img = ‘”o((>ω< ))o”,你传进来的不是图表!!’;
     looks(f, img);
    }
   }
  }
  
  // 处理插入拖出效益
  function handleDragEnter(evt){ this.setAttribute(‘style’, ‘border-style:dashed;’); }
  function handleDragLeave(evt){ this.setAttribute(‘style’, ”); }

  // 处理文件拖入事件,幸免浏览器默许事件带来的重定向
  function handleDragOver(evt) {
   evt.stopPropagation();
   evt.preventDefault();
  }
  
  cnt.addEventListener(‘dragenter’, handleDragEnter, false);
  cnt.addEventListener(‘dragover’, handleDragOver, false);
  cnt.addEventListener(‘drop’, handleFileSelect, false);
  cnt.addEventListener(‘dragleave’, handleDragLeave, false);
  
 } else {
  document.getElementById(‘section’).innerHTML = ‘你的浏览器不扶助啊,同学’;
 }
 </script>
</body>
</html>

     
那个例子中运用了html5中的文件读取API:FileReader对象;该目的提供了下列异步方法用于读取文件:

  1. FileReader.readAsBinaryString(fileBlob)
      以二进制的格局读取文件,result 属性会包蕴一个文件的二进制的格式
  2. FileReader.readAsText(fileBlob, opt_encoding)
      以文件的点子读取文件, result
    属性将会含有一个文书的文本格式,默许解码参数是 “utf-8”。
  3. FileReader.readAsDataURL(file)
      以URL情势读取文件result 将会蕴藏一个文本的 DataURL
    格式(图片寻常用那种措施)。

当使用方面的法子读取文件后,会触发下列事件:

onloadstart,onprogress,onabort,onerror,onload,onloadend

那么些事件都很容易,必要的时候挂接就足以了。看上面的代码示例:

function startRead() {  
  // obtain input element through DOM 
  
  var file = document.getElementById(‘file’).files[0];
  if(file){
    getAsText(file);
  }
}

function getAsText(readFile) {
  var reader = new FileReader();  
  // Read file into memory as UTF-16      
  reader.readAsText(readFile, “UTF-16”);  
  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties
    var loaded = (evt.loaded / evt.total);
    if (loaded < 1) {
      // Increase the prog bar length
      // style.width = (loaded * 200) + “px”;
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data    
  var fileString = evt.target.result;
  // Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + Name validation
  }
  else {
    // run other charset test
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == “NotReadableErr”) {
    // The file could not be read
  }
}

      那里也简要说一下:普通的文书下载使用的就是window.open方法,例如:

window.open(”)

 

实用参考: 官方文档:
一个不利的教程网站:
MSDN帮助:
文本拖拽详述:
文本拖拽并上传:
文本拖拽上传完整例子:
文本下载的例证:
window.open攻略:
window.open参数: 

发表评论

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

网站地图xml地图