本文目录一览：
- 1、我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
- 2、怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊
- 3、求一段JS或Jquery异步上传图片的代码
- 4、用js脚本,怎么实现弹出选择图片的对话框，并将文件上传到服务器
我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
Web Uploader 项目，符合你的要求。
1、引入资源
使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
!--引入CSS--
link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"
!--引入JS--
script type="text/javascript" src="webuploader文件夹/webuploader.js"/script
!--SWF在初始化的时候指定，在后面将展示--
2、Html
首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
!--dom结构部分--
div id="uploader-demo"
!--用来存放item--
div id="fileList" class="uploader-list"/div
div id="filePicker"选择图片/div
/div
3、Javascript
创建Web Uploader实例
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
// 文件接收服务端。
server: '',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。
PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'div id="' + file.id + '" class="file-item thumbnail"' +
'img' +
'div class="info"' + file.name + '/div' +
'/div'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('span不能预览/span');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('p class="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 = $('div class="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=""
titleDocument/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" /
brbrimg 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
求一段JS或Jquery异步上传图片的代码
图片和文件等流媒体 上传都是靠from表单的提交。
你可以设置一个隐藏的from表单
里面有个input id='file' type='file'
选择玩图片之后赋值给file
然后用jquery from表单提交即可
form id="form" runat="server" enctype="multipart/form-data"
input id='file' type='file'
/from
$.ajax({
url:'XXXX',//上传后台路径
data:$('#form').serialize(),
type:"POST",
success:function(){
}
});
用js脚本,怎么实现弹出选择图片的对话框，并将文件上传到服务器
//要有form标签，设置提交地址。后面就是后台的事了。
form action="提交地址" method="post" enctype="multipart/form-data"
input type="button" id="upload" name="" value="选择" /
input type="submit" id="upload" name="" value="提交" /
/form
//百度没给我审核通过：“先介绍算法思路，再给出参考代码，并对关键代码做注释说明。提供运行效果截图。”
//这句话是给百度的：“我真实忍不住要骂人，思路，参考代码，注释，还要运行效果截图！！这一串下来要花多少时间？？你TM是给我发工资还是怎么！！！？？我给别人解决问题浪费我少许时间我可接收我也算助人为乐，现在到好还要像孙子一样按你的指示一步步做事？？？？”
