html5ajax上传

Ⅰ ajax上传图片，C#编写的webserbice接收，无法上传

不是这样上传的，你就传个图片路径服务器怎么能获取到客户端的文件？
如果需要ajax异步上传图片，有两种解决方案，
一、采用HTML5的FileReader的readAsDataURL获取图片的base64编码，获取出来是一个字符串，把这个字符串上传到服务器，服务器接收到采用Convert.FromBase64String获取图片byte数组，再转换成图片格式保存。
二、使用隐藏form表单和隐藏iframe，将form的target属性设置为iframe的name，在from表单里放一个file控件，用它选择图片，然后提交form表单，后台接收到图片保存，返回一段js代码，类似window.parent.uploadCallback({"state":1,"url":"你保存图片的路径"});，然后在页面写一个function uploadCallback(result){//处理回调}
不知道有没有更好的解决办法，我用过的就这两种，感觉都挺好用。

Ⅱ html5文件上传实现进度条需要后端吗

不需要后端的，前端自己判断，代码如下：
function uploadFile(){

// 获取上传文件，放到 formData对象里面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData ,//这里上传的数据使用了formData 对象
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,

//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});

Ⅲ CI如何ajax方式上传图片

方法如下：

1、新建一个CI框架项目ajax，在controllers文件夹下新建控制器img，在img控制器下新建方法index，如下:

注意事项：

使用ajax，要引入js文件，比如jquery-1.7.2.min.js，否则ajax不执行。

Ⅳ 前端上传文件的几种方法

1.表单上传

最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。

form表单上传

表单上传需要注意以下几点：

(1).提供form表单，method必须是post。

(2).form表单的enctype必须是multipart/form-data。

javascript学习交流群：453833554

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

application/x-www-form-urlencoded：在发送前编码所有字符(默认)(空格被编码为’+’，特殊字符被编码为ASCII十六进制字符)。

multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：

method=’get’ 编码后的表单内容附加在请求连接后，

method=’post’ 编码后的表单内容作为post请求的正文内容。

Ⅳ html5上传文件如果用jquery ajax发送怎么监听事件

直接绑定事件触发ajax就行了，没必要一定要做事件监听

Ⅵ 基于HTML5的多图Ajax上传的php后台接收并获取图片宽高等信息

//但是为什么我用file_exists()判断文件是否存在时，得到的结果却是不存在呢
这句话后面加一句
$file='../uploads/' . $file;

你都把文件存成这个文件了 还用原来的文件名判断能行吗
后面的错误也是一样的

也可以直接把后面两个$file改掉
if(!file_exists('../uploads/' . $file)){

$src_info = @getimagesize('../uploads/' . $file);

Ⅶ html5如何上传图片到服务器

表单，ajax 都可以，具体要看你服务器要哪种格式了

Ⅷ 如何实现HTML5文件断点续传

实现HTML5文件断点续传

一、实现文件多选

HTML5的<input>新增了"multiple"属性，该属性可接受多个值的文件上传字段
<input type="file" multiple="multiple" name="file" id="file">
添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了
二、实现文件从计算机拖拽到网页以及添加文件队列功能
这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能
其中 dragover 用来处理在指定的元素上移动时的事件，这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件
document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = '';
}
用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理
document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
// 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
var files = evt.dataTransfer.files;
// addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
// 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
addfile(files);
}
三、文件续传原理
目前比较常用的断点续传的方法有两种，一种是通过websocket接口进行文件上传，另一种是通过ajax，两种方法各有千秋，虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的，并且服务端要开启ws接口，这里用相对方便的ajax来说明断点上传的思路。
说来说去，断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器，但是这看似简单的上传过程却有着无数的坑。
首先是文件的识别，一个文件被分成了若干份之后如何告诉服务器你切了多少块，以及最终服务器应该如何把你上传上去的文件进行合并，这都是要考虑的。
因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。
前台要把每一块的文件传给后台，成功之后前端和后端都要标识一下，以便后续的断点。
当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分，如果是的话，那么我们可以接着上次的进度继续传文件，以达到续传的功能。
四、文件的前端切片
有了HTML5 的 File api之后切割文件比想想的要简单的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
参数start是开始切片的位置，end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块
如
file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上传
上一部我们通过slice方法把文件分成了若干块，接下来要做的事情就是把这些碎片传到服务器上。
这里我们用ajax的post请求来实现
textpop-up

var xhr = new XMLHttpRequest();
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快
}
xhr.upload.onprogress = function(e){
// 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度
// e.loaded 该片文件上传了多少
// e.totalSize 该片文件的总共大小
}
xhr.send(packet);