关于文件上传的几种方式

上传之前 JavaScript 检测

1:javascript判断上传文件的大小:

在FireFox、Chrome浏览器中可以根据document.getElementById(“idoffile”).size 获取上传文件的大小(字节数),而IE浏览器中不支持该属性,只能借助标签的dynsrc属性,来间接实现获取文件的大小(但需要同意ActiveX控件的运行)。

var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
    browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
    browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
    browserCfg.chrome = true;
}
if(browserCfg.firefox || browserCfg.chrome ){
    filesize = objfile.files[0].size;
}else if(browserCfg.ie){
    var objimg = document.getElementById(‘tempimg‘);
    objimg.dynsrc=objfile.value;
    filesize = obj_img.fileSize;
}

2:在 HTML 文档中<input type="file">标签每出现一次,一个FileUpload 对象就会被创建。

该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

为安全起见,file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略,并且对于此类元素来说,value 属性是只读的,这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。

直接读value属性:

3:<input type=‘file‘>的files属性,是一个FileList对象(类数组对象),包含了名字和大小 等。如下:

HTML5 File API实现上传文件

访问本地文件的一个简单的方法是通过<input type="file"/> HTML表单元素。这会给你访问为只读信息提供一个单独的文件如它的名称,大小,MIME类型,文件句柄的引用。

HTML5的File API包括:

  1. FileList序列:代表本地系统中选中的文件组成的数组,通过<input type=‘file‘>调用
  2. Blob接口,原始二进制数据,通过Blob对戏那个你可以访问里面的字节数据。
  3. File接口,里面存有文件中的只读属性,文件名,类型,访问地址。
  4. FileReader接口,提供读取文件方法
  5. FileError接口和FileException对象,定义错误产生条件。

下面实现单文件访问:核心代码就两行,也就是上面提到的FileList和FileReader。 

结果:

实现多文件访问:

结果:

ps:另外一个种方式File API,它 是 Mozilla 向 W3C 提交的一个草案,可以监听onload,onprogress,onloadstart等事件。详见这里。

使用PHP实现文件上传

HTML:注意设置MIME编码为multipart/form-data.

enctype=”multipart/form-data”是上传二进制数据; form里面的input的值以2进制的方式传过去。

<form enctype="multipart/form-data" method="post" action="..">
    <input type="file" id="screenshot" name="screenshot" />
    <hr />
    <input type="submit" value="Add" name="submit" />
</form>

php:

$screenshot = $FILES[‘screenshot‘][‘name‘];
$screenshottype = $FILES[‘screenshot‘][‘type‘];
$screenshotsize = $_FILES[‘screenshot‘][‘size‘]; 

$target = $SERVER[‘DOCUMENTROOT‘].GWUPLOADPATH . $screenshot;
moveuploadedfile($FILES[‘screenshot‘][‘tmp_name‘], $target)//这里把我们上传的文件放到$target。

需要注意的是,moveuploadedfile函数里面的$target只能为绝对路径,不然就会报错。在这里困了好久。

时间: 2024-10-28 22:50:51

关于文件上传的几种方式的相关文章

Java文件上传的几种方式

文件上传与文件上传一样重要.在Java中,要实现文件上传,可以有两种方式: 1.通过Servlet类上传 2.通过Struts框架实现上传 这两种方式的根本还是通过Servlet进行IO流的操作. 一.通过Servlet类上传 1.编写Sevlet类 package com.chanshuyi.upload; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.

文件上传的三种方式-Java

前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践. 一.Http协议原理简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HT

利用Selenium实现图片文件上传的两种方式介绍

在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当开发直接使用file类型的input实现图片文件的上传时,实例:<input type="file" name=''filename"> 我们可以直接利用Selenium提供的方法实现文件上传,但是因为依赖开发的实现,而且目前实现基本都会利用框架,所以这种实现方式有很

SpringMVC文件上传的两种方式

搞JavaWEB的应该或多或少都做过文件上传,之前也做过简单的上传,但是如下的需求也确实把我为难了一把: 1.上传需要异步, 2.需要把上传后文件的地址返回来, 3.需要进度条显示上传进度. 项目使用SpringMVC架构+easyUI,初步分析,进度条可以使用easyui自带的进度条,上传可以使用ajaxFileUpload或者ajaxForm.文件传上去,然后把路径带回来是没问题的,关键是上传进度怎么获取.最终,两种方式都实现啦. 首先,不管哪种方式,后台对文件处理都是必须的.文件处理: 1

django文件上传的几种方式

方式一:通过form表单中,html input 标签的“file”完成 1 2 3 4 5 6 # 前端代码uoload.html     <form method="post" action="/upload/" enctype="multipart/form-data">         <input id="user" type="text" name="user&quo

ajax以及文件上传的几种方式

方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action="/upload/" enctype="multipart/form-data"> <input id="user" type="text" name="user" /> <input id='i

python文件上传的三种方式

def upload(request): return render(request, 'upload.html') def upload_file(request): username = request.POST.get('username') fafafa = request.FILES.get('fafafa') with open(fafafa.name, 'wb') as f: for item in fafafa.chunks(): f.write(item) print(user

ASP.NET Core 1.0中实现文件上传的两种方式(提交表单和采用AJAX)

Bipin Joshi (http://www.binaryintellect.net/articles/f1cee257-378a-42c1-9f2f-075a3aed1d98.aspx) Uploading files is a common requirement in web applications. In ASP.NET Core 1.0 uploading files and saving them on the server is quite easy. To that end

文件上传的三种模式-Java

转载自: http://www.myexception.cn/web/1935104.html 文件上传的三种方式-Java 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践.   一. Http协议原理简介     HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经