Jquery AJAX图片上传

作者: GAOJUNJUN | 来源:发表于2017-06-04 10:07 被阅读56次

首先下载ajaxfileupload.js
<script type="text/javascript" src="resource/js/ajaxfileupload.js"></script>
//html
<input type="file" hidefocus="true" size="30" id="pic" class="type-file-file" name="pic">
<input type="hidden" id="pics" >
//jquery
<script type="text/javascript">

//注意change每 点击一次
//文件选择框的onchange事件只在第一次改变时生效,以后再选择文件不会触发onchange事件
//错误代码 $('input[class="type-file-file"]').change(function(){});
$('input[class="type-file-file"]').live('change',function(){
var filepatd=$(this).val();
var extStart=filepatd.lastIndexOf(".");
var ext=filepatd.substring(extStart,filepatd.lengtd).toUpperCase();
if(ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
// alert("图片限于png,gif,jpeg,jpg格式");
layer.msg('图片限于png,gif,jpeg,jpg格式', {shift: 6});
$(this).attr('value','');
return false;
}else{
$.ajaxFileUpload(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'pic',
dataType: 'text',
success: function(data){
if(data=='error'){
layer.msg('系统错误', {shift: 6});
return false;
}else{
$('#pics').val(data);
}
}
}
);
}
});
</script>
//php页
<?php
if ((($_FILES["pic"]["type"] == "image/gif")|| ($_FILES["pic"]["type"] == "image/jpeg")|| ($_FILES["pic"]["type"] == "image/jpg")|| ($_FILES["pic"]["type"] == "image/png")|| ($_FILES["pic"]["type"] == "image/bmp")|| ($_FILES["pic"]["type"] == "image/pjpeg"))&& ($_FILES["pic"]["size"] < 10000000)){//100KB
$extend = explode(".",$_FILES["pic"]["name"]);
$key = count($extend)-1;
$ext = ".".$extend[$key];
$newfile = time().$ext;
$dirname=date('Ymd',time());
if(!file_exists('../uploadfile/'.$dirname)){mkdir('../uploadfile/'.$dirname);}
move_uploaded_file($_FILES["pic"]["tmp_name"],"../uploadfile/".$dirname."/" . $newfile);
@unlink($_FILES['pic']);
$pics="../uploadfile/".$dirname."/" . $newfile;
echo $pics;
}else {
echo 'error';
}
?>

相关文章

  • django上传图片前后端实例

    相关阅读 JQuery Ajax使用FormData对象上传文件 图片 | CSDNDjango 图片上传、存储与...

  • 表单上传图片(记录)

    项目背景:使用form表单,jQuery的ajax上传图片 获取表单数据,判断图片大小,处理图片,上传表单 压缩图...

  • Jquery AJAX图片上传

    首先下载ajaxfileupload.js //html //jquery //注意change每 点击一次...

  • Illegal invocation

    问题描述:在使用jQuery封装的ajax请求的时候,用于上传图片,表单等一系列。里面formData方法传入作为...

  • jquery ajax表单上传数组后台接收不到解决办法

    jquery ajax上传数组的时候,后台接收不到,需要加上 traditional:true, 这个属性。可以上传成功

  • FormData多文件上传

    问题:jquery Ajax serialize()表单进行序列化方式上传文件 通过$(‘#example’).s...

  • Jquery Ajax 封装

    Jquery Ajax封装 Jquery Ajax 调用

  • 2018-05-23

    图片上传 form上传 ajax上传 FileReader 利用FileReader对象,将input中的file...

  • ajax上传图片

    场景:1、使用cropper裁剪图片、html2canvas合成图片后将图片上传至顽兔空间2、运行环境手淘、天猫3...

  • Ajax图片上传

    1、定义上传的图片展示和按钮 2、点击时调用的上传功能的函数 3、先定义好文件上传处理函数 4、再使用定义好的查询...

网友评论

    本文标题:Jquery AJAX图片上传

    本文链接:https://www.haomeiwen.com/subject/sodvfxtx.html