jquery上传图片点击图片上传
好像不可以吧,浏览器为了安全不能用javascript读取本地文件的
‘贰’ php上传功能怎么实现点击浏览在打开文件之后直接上传
我的博客《用最简单的例子实现jQuery图片即时上传》已经做了详细的介绍,请参考实现。
主要原理:
jQuery上传插件将<inputtype="file">的数据转至一个新生的form当中将其提交,
而表单的target指向新生的iframe,在iframe中做表单提交后的处理,
完成后iframe会重新加载并包含处理结果,通过iframe的load事件便可捕捉并获取处理结果,
回传至原表单所在的页面(feedback)中,实现jQuery即时上传的效果。
而在表单提交的时候,为了实现选择文件后即时提交表单,则使用了input标签的change事件,
只要选择了文件,input的值就会发生变化,此时就可以提交表单进行处理了。
‘叁’ 求一段JS或Jquery异步上传图片的代码
图片和文件等流媒体 上传都是靠from表单的提交。
你可以设置一个隐藏的from表单
里面有个<input id='file' type='file'>
选择玩图片之后赋值给file
然后用jquery from表单提交即可
<formid="form"runat="server"enctype="multipart/form-data">
<inputid='file'type='file'>
</from>
$.ajax({
url:'XXXX',//上传后台路径
data:$('#form').serialize(),
type:"POST",
success:function(){
}
});
‘肆’ 有哪些好用的 jQuery 图片上传插件
1、uploadify
它是针对jQuery的免费文件上传插件,可以轻松将单个或多个文件上传到网站上,可控制并发上传的文件数,通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。
2、FancyUpload
它是一个由CSS和XHTML编写样式的Ajax文件上传工具,安装简便,服务器独立,由MooTools模块驱动,可以在任何现代浏览器上使用。
3、Aurigma Upload Suite(Image Uploader)
这是一个不限大小,不限格式的文件/图片批量上传工具,是收费控件。它支持云端存储和客户端文件处理,支持断点续传,稳定可靠。从8.0.8开始,Image Uploader将名称改为"Aurigma Upload Suite"。
‘伍’ jquery怎么打开本地图片预览,点击确定后上传
1, tapmodo / Jcrop
Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选。Github.com官网也使用了这个插件。有一个小细节是,边框线的蚂蚁线是动画的,真的很用心。
2, fengyuanchen / cropper
Cropper也是一款图片裁剪jQuery插件,stars数量1k+,是杭州的前端工程师Fengyuan Chen所写的,功能也相当丰富,裁剪时还可以对原图进行旋转。
3, imgAreaSelect 也是比较经典的图片裁剪jQuery插件,我很久以前就在自己的项目中使用过,stars数量500+。
http://blog.csdn.net/cuixiping/article/details/45966177
‘陆’ 用jquery如何实现提交表单点击提交之后显示正在上传中,之后显示上传成功的效果
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。
‘柒’ 我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
WebUploader项目,符合你的要求。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功,给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败,显示上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多细节,请查看js源码。
‘捌’ 怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
{
$("#img0").attr("src", objUrl);
$("#img0").removeClass("hide");
}
}) ;
//建立一个可存取到该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 ;
}
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
alert(value);
})
</script>
</html>
‘玖’ jquery如何将页面生成的图片上传到服务器
File Upload组件啊,是同步还是异步呢
html部分:
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入:
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分:
<div id="demo"> <div id="as" ></div></div>
JS部分:
<script type="text/javascript">
/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;* 其他参数同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '选择文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>