js上传图片并显示
㈠ JS 显示 上传 图片 ,,高手帮我解释一下这段代码
浏览器安全性已经大大提高,要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法,firefox3的getAsDataURL方法
具体可以参考这个图片上传预览效果
㈡ 如何使用js实现IE9下上传图片并预览
<div >
<div id="headImgPicview">
<img src="" id="headImgPic" width="200" height="auto"/>
</div>
<input type="text" id="headImgShow" name="headImg"
placeholder="图片(.jpg .jpeg .png)" size="40"
pattern="(.jpg$)|(.jpeg$)|(.png)|(.JPG$)|(.JPEG$)|(.PNG$)"
data-foolish-msg="请选择图片!"
value=""
required readonly/>
<div class="am-form-group am-form-file" style="width: 175px">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 选择要上传的图片</button>
<input type="file" id="headImg" onchange="imgcheck('headImg',this)" multiple>
</div>
</div>
//文件动态上传方法+格式判断
function imgcheck(imgid,file){
if(!(/.jpg$/.exec($('#'+imgid).val())||(/.png/.exec($('#'+imgid).val()))||(/.jpeg$/.exec($('#'+imgid).val()))
||(/.JPG$/.exec($('#'+imgid).val()))||(/.PNG$/.exec($('#'+imgid).val()))||(/.JPEG$/.exec($('#'+imgid).val())) )){
alert("图片格式不正确!应为:.jpg .jpeg .png");
$('#'+imgid).val('');
}else{
var imgURL = document.getElementById(imgid);
$('#'+imgid+'Show').attr('placeholder',imgURL.value);
//调用图片预览
previewImage(imgid+'Pic',file);
㈢ js:点击按钮上传图片,最多能上传3张,上传第4张给出提示,js怎么写
你的上传按钮是怎么操作的?是表单的submit还是单独的按钮onclick事件调用方法?
㈣ 求js或JQ代码,实现图片上传后在指定的div中以背景图显示
如果是background的话使用 $("div").css("background-image","图片地址"),如果使用的img的话使用$("div").attr("src","地址");关键就是获取图片地址给弄上去
㈤ three.js 中怎么实现点击一个面片几何体后可以上传图片,并且将这张图作为面片几何体的材质显示出来
呵呵,这个我才做过的
这个分三层,一层放图片画面,一层放按钮和文字,一层放隐形按钮(放在最上面)。每个图片画面是一个影片剪辑,效果就是透明度的变化。假设每个剪辑用了30帧(前10帧透明度从0变到100),在场景中加入剪辑后,就要插入30帧,再放下一个剪辑。依次。。。
按钮“1”上写代码:
on (release) {
gotoAndPlay(1);//跳到相应画面的首帧
}
隐形按钮层在最上面,透明度为1,大小与图片大小一致,在第一个按钮上写代码:
on (rollOver) {
gotoAndStop(29);
}
on (rollOut) {
gotoAndPlay(18);//这里没有让它直接就在29帧处播放,有一个停顿
}
㈥ 实现下面代码的上传图片并浏览的功能,html+js实现,求指教,在线等。。。
单纯的 JS 不能实现文件上传,仅能做预览(而且还要看浏览器的隐私设置是否允许)。
代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
<scripttype="text/javascript">
functionshowImage()
{
//获取文件路径
varpath=document.getElementById('upload').value;
//显示文件路径
document.getElementById('imgName').innerHTML=path;
//创建img
varimg=document.createElement('img');
//载入图像
img.src=path;
//插入图像到页面中
document.getElementById('imgPrev').appendChild(img);
}
</script>
<tableborder="1"style="width:1000px">
<trclass="midTable1td1"style="height:50px;">
<tdalign="center">图片描述</td>
<tdalign="center">图片</td>
<tdalign="center">操作</td>
</tr>
<trclass="midTable1td2"style="height:200px">
<tdid="imgName"class="inputContent"align="center">显示图片名</td>
<tdid="imgPrev"align="center">显示图片</td>
<tdalign="center"><inputtype="button"name="Submit2"value="删除"class="button"></td>
</tr>
</table>
<form>
<inputtype="file"id="upload"onChange="showImage()"/>
</form>
</body>
</html>
㈦ 怎么在js里上传图片
使用ajax异步处理;
㈧ 用javascript显示上传的图片
在浏览器中显示本地图片:
<img src="file:///c:1.jpg"/>
这个 只有IE6支持,
全兼容的提交前预览,
只能用AJAX偷偷的提交到 服务器 再返回个http:地址, 或flash什么的了。
㈨ 我需要一个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、jquery如何实现上传图片的预览
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//获得表单元素
HttpPostedFile oFile = context.Request.Files[0];
//设置上传路径
string strUploadPath = "temp/";
//获取文件名称
string fileName = context.Request.Files[0].FileName;
补充:JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。