使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下。

HTML

<form id="fileupload-form">
     <input id="fileupload" type="file" name="file" >
</form>

HTML代码没什么好说,一个form表单,还有文件类型的input。我们来看js部分。

javascript

    //绑定了`submit`事件。
    $(‘#fileupload-form‘).on(‘submit‘,(function(e) {
        e.preventDefault();
        //序列化表单
       var serializeData = $(this).serialize();

       // var formData = new FormData(this);
       $(this).ajaxSubmit({
            type:‘POST‘,
            url: *yoururl*,
            dataType: ‘json‘,
            data: serializeData,
            // data: formData,

            //attention!!!
            contentType: false,
            cache: false,
            processData:false,      

            beforeSubmit: function() {
                    //上传图片之前的处理
            },
            uploadProgress: function (event, position, total, percentComplete){
                //在这里控制进度条
            },
            success:function(){

            },
            error:function(data){
                alert(‘上传图片出错‘);
            }
        });
    }));

    //绑定文件选择事件,一选择了图片,就让`form`提交。   

    $("#fileupload").on("change", function() {
        $(this).parent().submit();
    });

PHP

<?php
    //通过$_FILES[]去获取文件
    echo ‘$_FILES[‘file‘]‘;

遇到的坑:

  • 序列化表单,因为是文件,不能通过val()text()等方法获取到它的值,只能通过序列化表单提交。代码里面使用.serialize(),有另外一种做法是使用.FormData()来提交,但是实验过程中,一开始正常,后来报错了。在stackoverflow.com上有人看到有人遇到同样地问题,没有解决,于是就放弃了。
  • 普通的ajax是没办法或者说很难拿到上传进度的。这里使用了一个插件jQuery Form Plugin,使用方法很简单,原本ajax的配置都能用,而且有很多实用功能和详尽的使用文档。推荐~
  • ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false,
  • 获取本地预览图,这种方法可能会有浏览器兼容性问题。
$("#fileupload").change(function(){
    if (this.files && this.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
            $(‘#theImg‘).attr(‘src‘, e.target.result);
        }
       reader.readAsDataURL(this.files[0]);
   }
}
  • php部分注意虽然Ajax那里使用的是POST方法,但是后台接受的时候只要是文件都是用$_FILES。你可以通过$_FILES[‘file‘][‘type‘]去判断文件格式来做安全处理,我们这里只是演示。还有其他参数,比如tmp_name是文件路径,name是文件名。后台接收以后,你可以使用move_uploaded_file()来将文件保存到服务器上。这里就不多说。

其他补充

另外@_w同学补充,不刷新页面还可以通过设置formtarget属性指向一个当前页面隐藏的iframe来实现。让那个iframe去刷新跳转页面。上面提到的jQuery Form Plugin也支持你这么做。

另外再推荐一个插件jquery-iframe-transport

推荐阅读

javascript方面我是新手,希望这篇文章能帮到更多遇到相同问题的人。如果哪里写的不好或者不对,还希望各位同行能够善意指出。

如需转载,请注明出处:http://www.w3ctrain.com/2015/07/11/uploading-image-with-ajax/

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-29 19:06:16

使用Ajax异步上传图片的方法(html,javascript,php)的相关文章

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上传文件的操作:          //第1次,post 只上传文件,返回文件名name          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件          //(如果有其他参数,也可以通过第2次一并上传) 图片文件

ajax异步上传图片文件并将其转换为base64格式

高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得另想他法.下面是高级浏览器的示例代码. $('.image').change(function(e) { var target = $(e.target); var file; if(target[0].files && target[0].files[0] ) { file = target[0].files[0]; } if(file) {

ajax异步上传图片&amp;SpringMVC后台代码

function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post", dataType : "json", success : function(data){ $("#allUrl").attr("src", data.url); $("#imgUrl").val(data.url);

ajax异步上传图片三种方案

转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我

thinkPHP利用ajax异步上传图片并显示、删除

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题. 表单文件form: <form method="post" enctype="multipart/form-data"> <div style="margin: 20px 20px 20px 10px;"

js 原生 ajax 异步上传图片

<script type="text/javascript"> function upload() { var file1 = document.getElementById("file1"); postFile(file1.files[0]); } function postFile(data) { //1.创建异步对象(小浏览器) var req = new XMLHttpRequest(); //2.设置参数 req.open("post

php结合jquery异步上传图片(ajaxSubmit)

php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

Struts2学习(四)利用ajax异步上传

上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步上传. 此例中须要的文件能够点击这里下载:struts2异步所需文件 文件说明: ajaxfileupload.js : jquery不支持上传,所以使用这个ajax插件,和 jquery 中的ajax使用方法差点儿相同,从以下代码能够看到. json2.js : 对ajax中的回调參数进行json

JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)

一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发送请求 - 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容 Ajax工作原理 获取Ajax对象 二.Ajax对象属性和方法 异步对象的属性和方法 onreadystatechange - onreadystatecha