//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
$(document).on('change', '.wishfile', function () {
var _upload_file = $(this).val().toLowerCase();
var _upload_file_hz = _upload_file.substr(_upload_file.lastIndexOf('.') + 1);
var _upload_file = ['jpg', 'png', 'gif', 'jpeg'];
if ($.inArray(_upload_file_hz, _upload_file) < 0) {
alert('上传格式不正确');
$(this).val('');
return false;
}
var objUrl = getObjectURL(this.files[0]);
//console.log("objUrl = " + objUrl);
if (objUrl) {
// img src=objUrl
}
});
        // form要写enctype="multipart/form-data"
var formData = new FormData($("#formid")[0]);
$.ajax({
url: 'dopost.php',
type: 'POST',
data: formData,
//async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
if (returndata == 1) {
alert('上传成功');
} else {
alert('上传失败');
}
},
error: function (returndata) {
alert('something wrong!');
}
});

h5 js 图片预览并判断 ajax上传的更多相关文章

  1. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  2. js实现图片预览、压缩、上传

    先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190. ...

  3. h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  5. thinkphp3.2.2有预览的多图上传

    thinkphp3.2.2有预览的多图上传 整体思路 1 封装文件上传和图片上传的类文件 2 视图中添加相关JS和表单提交 3 控制器中添加上传文件的相关代码 一 2个class 文件 请上传到/Th ...

  6. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  7. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  8. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  9. js图片预览带进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 登录式与非登录式&交互式与非交互式shell及其环境初始化过程

    交互式shell和非交互式shell(interactive shell and non-interactive shell) 交互式模式就是在终端上执行,shell等待你的输入,并且立即执行你提交的 ...

  2. iptables--简单的防火墙

    iptables--简单的防火墙 如果你执行iptables --list你将看到防火墙上的可用规则.下例说明当前系统没有定义防火墙,你可以看到,它显示了默认的filter表,以及表内默认的input ...

  3. iOS在label上加横杠

    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 50, 200, 50)];    [self.view addSubvi ...

  4. mvc4 分离Controller 出现 未找到路径“/”的控制器或该控制器未实现 IController

    一般MVC项目都会把Controller 分离出来独立类库,以前用mvc3一直这样做,测试发布都能够正常运行,这次用了mvc4,发现会报错:HTTP 404.您正在查找的资源(或者它的一个依赖项)可能 ...

  5. asp.net静态变量的生命周期和线程安全

    void Application_Start开始 void Application_End结束的,本来这就是对的 今天要做一个全局的应用,想确认一下,在网上一找,我的天,说什么的都有 大概分三种 1. ...

  6. Value must be an existing directory配置tomcat问题

    今天tomcat配置遇到了这么个问题,表示tomcat下少什么文件夹,一般是你的安装目录tomcat文件夹下面少了一个temp文件夹,在tomcat的安装文件夹下建一个temp文件夹再加一次tomca ...

  7. 排序算法(JAVA)

    import java.util.Random;      /**  * 排序测试类  *   * 排序算法的分类如下:  * 1.插入排序(直接插入排序.折半插入排序.希尔排序):  * 2.交换排 ...

  8. 30款最好的 Bootstrap 3.0 免费主题和模板

    Twitter Bootstrap 框架已经广为人知,用于加快网站,应用程序或主题的界面开发,并被公认为是迄今对于 Web 开发的最有实质性帮助的工具之一.在此之前的,各种各样的界面库伴随着高昂的维护 ...

  9. SQL Server 2012 AlwaysOn 亲身实历记

    亲身经历的一个项目,老板忽然提出,对数据库的负债要实施分流,来个数据库一个负责读,而另一个负责写,后台是需要同步两个数据库的状态.找了很多的资料,发现新版的alwayson可以实现这个功能. 研读了a ...

  10. 【c++】虚基类

    何要使用虚基类: 为何避免多层继承中出项多个公共基类所造成的歧义现象 虚基类用法 派生类继承基类时,加上一个virtual关键词则为虚拟基类继承. 在上图程序运行中,我们发现class bass的构造 ...