js实现图片上传
A. 求js或JQ代码，实现图片上传后在指定的div中以背景图显示
如果是background的话使用 $("div").css("background-image","图片地址")，如果使用的img的话使用$("div").attr("src","地址");关键就是获取图片地址给弄上去
B. js/jquery如何实现一张图片的上传预览功能。。。。
使用AJAX，把文件保存到临时目录，把返回的值（文件路径），放到页面上预先添加的<IMG> 标签中，就可显示预览图片，再点上传才把文件从临时目录（删除临时目录文件）复制到你指定的目录中
C. 用javascript写一个图片上传的功能,将图片放置在一个文件夹下
用ASP做吧！一共三个页面。再建一个名为photo.mdb数据库！' index.asp<%
Response.Buffer = True
Server.ScriptTimeOut=9999999
On Error Resume Next
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta content="all" name="robots" />
<meta name="author" content="mhooo,Woodeye" />
<style type="text/css">
<!--
body,input {font-size:12px;}
-->
</style>
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
var image=new Image();
var iwidth = 420; //定义允许图片宽度
var iheight = 390; //定义允许图片高度
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
<title></title>
</head>
<body id="body">
<div align="center">
<%
ExtName = "jpg,gif,png" '允许扩展名
SavePath = "upload" '保存路径
If Right(SavePath,1)<>"/" Then SavePath=SavePath&"/" '在目录后加(/)
CheckAndCreateFolder(SavePath) UpLoadAll_a = Request.TotalBytes '取得客户端全部内容
If(UpLoadAll_a>0) Then
Set UploadStream_c = Server.CreateObject("ADODB.Stream")
UploadStream_c.Type = 1
UploadStream_c.Open
UploadStream_c.Write Request.BinaryRead(UpLoadAll_a)
UploadStream_c.Position = 0 FormDataAll_d = UploadStream_c.Read
CrLf_e = chrB(13)&chrB(10)
FormStart_f = InStrB(FormDataAll_d,CrLf_e)
FormEnd_g = InStrB(FormStart_f+1,FormDataAll_d,CrLf_e) Set FormStream_h = Server.Createobject("ADODB.Stream")
FormStream_h.Type = 1
FormStream_h.Open
UploadStream_c.Position = FormStart_f + 1
UploadStream_c.CopyTo FormStream_h,FormEnd_g-FormStart_f-3
FormStream_h.Position = 0
FormStream_h.Type = 2
FormStream_h.CharSet = "GB2312"
FormStreamText_i = FormStream_h.Readtext
FormStream_h.Close FileName_j = Mid(FormStreamText_i,InstrRev(FormStreamText_i,"\")+1,FormEnd_g) If(CheckFileExt(FileName_j,ExtName)) Then
SaveFile = Server.MapPath(SavePath & FileName_j) If Err Then
Response.Write "文件上传： <span style=""color:red;"">文件上传出错!</span> <a href=""" & Request.ServerVariables("URL") &""">重新上传文件</a>
"
Err.Clear
Else
SaveFile = CheckFileExists(SaveFile) k=Instrb(FormDataAll_d,CrLf_e&CrLf_e)+4
l=Instrb(k+1,FormDataAll_d,leftB(FormDataAll_d,FormStart_f-1))-k-2
FormStream_h.Type=1
FormStream_h.Open
UploadStream_c.Position=k-1
UploadStream_c.CopyTo FormStream_h,l
FormStream_h.SaveToFile SaveFile,2 SaveFileName = Mid(SaveFile,InstrRev(SaveFile,"\")+1)
Response.write "文件上传： <img src=../img.asp?src=" & SaveFileName & " onload ='DrawImage(this)'/> 文件上传成功! <a href=""" & Request.ServerVariables("URL") &""">继续上传文件</a><p><span style=""color:red;"">（申请将图片显示在网站首页！）</span> <form action='a.asp' method='post'><input name='pic' type='hidden' value='" & SaveFileName & "' /><input type='submit' name='Submit' value='点击申请' style='height:18px;border:1px solid #CCCCCC'/></form>"
End If
Else
Response.write "文件上传： <span style=""color:red;"">文件格式不正确!</span> <a href=""" & Request.ServerVariables("URL") &""">重新上传文件</a>
"
End If Else
%>
<script language="Javascript">
<!--
function ValidInput()
{ if(document.upform.upfile.value=="")
{
alert("请选择上传文件！")
document.upform.upfile.focus()
return false
}
return true
}
// -->
</script>
</div>
<form action='<%= Request.ServerVariables("URL") %>' method='post' name="upform" onsubmit="return ValidInput()" enctype="multipart/form-data">
文件上传：
<input type='file' name='upfile' size="40" style="height:18px;border:1px solid #CCCCCC" > <input type='submit' value="上传" style="height:18px;border:1px solid #CCCCCC">
</form>
<%
End if
Set FormStream_h = Nothing
UploadStream.Close
Set UploadStream = Nothing
%>
</body>
</html>
<%
'判断文件类型是否合格
Function CheckFileExt(FileName,ExtName) '文件名,允许上传文件类型
FileType = ExtName
FileType = Split(FileType,",")
For i = 0 To Ubound(FileType)
If LCase(Right(FileName,3)) = LCase(FileType(i)) then
CheckFileExt = True
Exit Function
Else
CheckFileExt = False
End if
Next
End Function '检查上传文件夹是否存在，不存在则创建文件夹
Function CheckAndCreateFolder(FolderName)
fldr = Server.Mappath(FolderName)
Set fso = CreateObject("Scripting.FileSystemObject")
If Not fso.FolderExists(fldr) Then
fso.CreateFolder(fldr)
End If
Set fso = Nothing
End Function '检查文件是否存在，重命名存在文件
Function CheckFileExists(FileName)
Set fso=Server.CreateObject("Scripting.FileSystemObject")
If fso.FileExists(SaveFile) Then
i=1
msg=True
Do While msg
CheckFileExists = Replace(SaveFile,Right(SaveFile,4),"_" & i & Right(SaveFile,4))
If not fso.FileExists(CheckFileExists) Then
msg=False
End If
i=i+1
Loop
Else
CheckFileExists = FileName
End If
Set fso=Nothing
End Function
%> ' a.asp<!--#include file="conn.asp" -->
<%
pic=request.form("pic")
exec="insert into guest(pic)values('"+pic+"')"
conn.execute exec
conn.close
set conn=nothing
Response.Write("<script language=javascript>alert('恭喜您,申请成功!您上传的图片将在本站首页显示！')</script>")
response.write("<script>window.opener=null;window.close();</script>")
%>
'conn.asp<%
set conn=server.createobject("adodb.connection")
conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("data/photo.mdb")
%>
D. 怎样用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>
E. js关于图片上传路径的获取
浏览器安全性已经大大提高，要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法，firefox3的getAsDataURL方法
具体可以参考这个图片上传预览效果
F. 我想实现 html +js 上传图片 并保存到本地tmp目录下，现有代码如下，求指导。必采纳
你js代码把文件以base64编码形式展示了出来，是为了让用户上传文件之前能够预览对吧。
文件的IO操作需要用后端来实现，如果你只是做web前端开发的话，就没有必要研究这个东西，如果你是后端开发者的话可以尝试一下，相关的资料很多，我写个示例吧，后端用php为例：
html实现：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>ss</title>
</head>
<body>
<formaction="file.php"method="post"enctype="multipart/form-data">
<inputtype="file"name="upfile">
<inputtype="submit"value="提交">
</form>
</body>
</html>
php实现（file.php）：
<?php
@header('Content-Type:text/html;charset=utf-8');
if(!isset($_FILES['upfile'])){
exit('请选择您要上传的文件！');
}
if(!file_exists($_FILES['upfile']['tmp_name'])){
exit('您要上传的文件不存在！');
}
$file_dir=dirname(__FILE__).'/tmp';
if(!is_file($file_dir)){
@mkdir($file_dir,0777,true);
}
$file_ext='.jpg';
if(preg_match('/(.w+)$/',$_FILES['upfile']['name'],$ext_tmp)){
$file_ext=$ext_tmp[1];
}
$file_save_path=$file_dir.'/'.uniqid().mt_rand(101,999).$file_ext;
@rename($_FILES['upfile']['tmp_name'],$file_save_path);
if(!file_exists($file_save_path)){
exit('文件上传失败！');
}
exit('文件上传成功！');
G. 用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即可。
H. 用js脚本,怎么实现弹出选择图片的对话框，并将文件上传到服务器
弹出框用框架（layer.js，具体使用可参考官方文档）。
HTML如下：
!!! 注意这种提交会刷新页面
<formname="upload-file"method="post"enctype="multipart/form-data">
<labelfor="upload-file">上传</label>
<inputid="upload-file"type="file"name="images"hidden="hidden">
<inputtype="submit"value="提交">
</form>
提交过后后端就可以获取到图片(PHP获取代码如下：$_POST['images'];)
I. 如何用javascript实现<img>控件的图片上传
fileupload(前台id：fleupld)控件加一个onclick方法：getvalue()
{document.getelementbyid("label的id").innerhtml=document.getelementbyid("fleupld").value;}
document.getelementbyid("fleupld").value
获取的是fileupload中文件的全路径，当然你可以截取这个值，获得其子字符串（单个文件的名称）。
J. 前端，js实现图片上传的原理是设么能回答面试即可
H5的话，就是把本地的图片按照指定的格式读取到缓存里，再供JS代码进行调用传给后台，格式的话base64吧