导航:首页 > 文件目录 > javascript打开上传图片文件

javascript打开上传图片文件

 发布时间：2023-05-06 15:41:04

Ⅰ 如何在前端用js进行多图片上传

    产品提了一个需求，要求在一个html中实现多行多图片上传，原型图如下:

    2.1 ：html

        html页面由前端实现，此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现

        <ul  id="ul_other">

              <li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>

    慧雀    </ul>

    2.2 ：js

        var imgSrc_other=[];

        var imgFile_other=[];

        function add_file_image(id) {

            var fileList =document.getElementById("file_"+id).files;// js 获取文件对象

            if (verificationFile(fileList[0])){

                for(var i =0;i

                    var imgSrcI =getObjectURL(fileList[i]);

                        if (id=="other"){

                            imgSrc_other.push(imgSrcI);

                            if(fileList[i].size/1024 >100) { //大于100kb，进行压缩上传

                                 fileResizetoFile(fileList[i],0.6,function(res){

                                  imgFile_other.push(res);

                                })

                            }else{

                                imgFile_other.push(res);

                        }

                    }

                    addNewContent(id);

                }

        }

    //新增图片

    function addNewContent(obj) {

        //删除原先

        $("#ul_"+obj).html("");

        //判断循环新增

        var  text="";

        if (obj=="other"){

           for(var a =0;a < imgSrc_examReportCard.length;a++) {

            text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>';

           }

        }else{

            console.log('脏数据');

        }

        var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +

        "<input type=\"file\" id=\"file_"+obj+"\"  class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +

    猜碧祥    "</div></li>";

        $("#ul_"+obj).html( text+localText);

    }

    使用formData上传

    var form =document.getElementById("form_addArchive");//表单id

    var formData =new FormData(form);

    $.each(imgFile_other,function(i, file){

        formData.append('imgFileOther', file);

    });

$.ajax({

    url:url,

    type:'POST',

    async:true,

    cache:false,

    contentType:false,

    processData:false,

    dataType:'json',

    data:formData,

    xhrFields:{

        withCredentials:true

 穗搏   },

    success:function(data) {

     }

  },

  error:function(XMLHttpRequest, textStatus, errorThrown) {

    }

})

后台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile> imgFileOther, 接受

//获取图片url以便显示       

//文件格式验证

//图片压缩

Ⅱ 怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊

<! 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>

Ⅲ javascript对用户上传的图片进行处理

这个对javascript来说有点勉为其难了。不过你可以在服务器端用图像处理组件（比如ASPJpeg）来做回这样的事。以答下是把任意大小的图片处理成120*160的例子(ASP)：
<%
Set Jpeg = Server.CreateObject("Persits.Jpeg")
Jpeg.Open Server.MapPath("原图片的路径及文件名")
Jpeg.Quality = 80 '图片压缩后的显示质量
Jpeg.Width = 120 '压缩后的图片宽度
Jpeg.Height = 160 '压缩后的图片高度
set fso=server.createobject("scripting.filesystemobject")
Jpeg.Save Server.MapPath("处理后的图片路径及文件名")
Jpeg.Close
Set Jpeg = Nothing
%>
通过这个你就可以对用户上传的图片进行尺寸调整，具体多大的尺寸可以使图片的字节数控制在65K内就你自己去试了。
PS:目前大部分的WEB服务器都支持ASPJpeg组件的。

Ⅳ 用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即可。

Ⅳ js input file文件上传图片并展示

​​​​​​

    1 页面HTML内容

    2 获取input[file]元素    

    3 对获取的file元素操作，也就枯蔽是操作fileReader属性    

1：Blob

2:  File

3:  FileList

4:  FileReader

FileList ：

这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名; size ; type 文件类型; lastModified 最后修改时间；

FileReader：异步读取本地文件内容；包括File 和Blob ；

    创建FileReader对象;读取file文件

关于fileReader的几个属性：

FileReader.error 只读一芹桥个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只没首州读一个数字表明的状态FileReader。这是以下之一：

FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取操作。

fileReader的几个事件处理程序：

1 . FileReader.onbort:在读取操作中止时触发。

2 . FileReader.onerror:在读取操作遇到错误时触发。

3 . FileReader.onload:在读取操作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法：

1 . FileReader.abort();中止读取操作

2 . FileReader.readAsArrayBuffer();完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString();完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL();完成时result属性包含data：表示文本数据的URL；

5 . FileReader.readAsText();完成时result属性包含文本的内容作为文本字符串。

Ⅵ 怎么用jquery或者javascript实现:如图1的那个按钮，可以让上传或预览图片

1、点击图1的那个按钮可以让用户选择上传的图片，选择了一张就在按钮前版面预览，如果用权户不想上传某张图片可以点击x取消，再点击上传按钮可以接着选择图片上传。

2、设置选择图片的按钮的 click 事件，去触发 #upload_file 的 click 事件，然后就可以点击图片按钮后，选择本地图片文件了。

3、设置上传按钮，其实一般手机版网页是没有上传按钮的，即选择图片后就通过 Ajax 上传图片了。

Ⅶ 用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'];)

Ⅷ java web开发，上传图片并读取

java web开发中，使用文件操作类来上传图片并读取，如下代码：

*@desc:图片处理工具
*@author:bingye
*@createTime:2015-3-17下午04:25:32
*@version:v1.0
*/
publicclassImageUtil{

/**
*将图片写到客户端
*@author:bingye
*@createTime:2015-3-17下午04:36:04
*@history:
*@paramimage
*@paramresponsevoid
*/
publicstaticvoidwriteImage(byte[]image,HttpServletResponseresponse){
if(image==null){
return;
}
byte[]buffer=newbyte[1024];
InputStreamis=null;
OutputStreamos=null;
try{
is=newByteArrayInputStream(image);
os=response.getOutputStream();
while(is.read(buffer)!=-1){
os.write(buffer);
os.flush();
}
}catch(IOExceptione){
e.printStackTrace();
}finally{
try{
if(is!=null){is.close();}
if(os!=null){os.close();}
}catch(IOExceptione){
e.printStackTrace();
}
}
}

/**
*获取指定路劲图片
*@author:bingye
*@createTime:2015-3-21上午10:50:44
*@paramfilePath
*@paramresponsevoid
*/
publicstaticvoidwriteImage(StringfilePath,HttpServletResponseresponse){
FileimageFile=newFile(filePath);
if(imageFile!=null&&imageFile.exists()){
byte[]buffer=newbyte[1024];
InputStreamis=null;
OutputStreamos=null;
try{
is=newFileInputStream(imageFile);
os=response.getOutputStream();
while(is.read(buffer)!=-1){
os.write(buffer);
os.flush();
}
}catch(FileNotFoundExceptione){
e.printStackTrace();
}catch(IOExceptione){
e.printStackTrace();
}finally{
try{
if(is!=null){is.close();}
if(os!=null){os.close();}
}catch(IOExceptione){
e.printStackTrace();
}
}
}
}

/**
*图片上传到文件夹
*@author:bingye
*@createTime:2015-3-20下午08:07:25
*@paramfile
*@paramsavePath
*@returnboolean
*/
(CommonsMultipartFilefile,StringsavePath){
if(file!=null&&!file.isEmpty()){
//获取文件名称
StringfileName=file.getOriginalFilename();
//获取后缀名
StringsuffixName=fileName.substring(fileName.indexOf(".")+1);
//新名称
StringnewFileName=System.currentTimeMillis()+"."+suffixName;
//新文件路劲
StringfilePath=savePath+newFileName;
//获取存储文件路径
FilefileDir=newFile(savePath);
if(!fileDir.exists()){
//如果文件夹没有：新建
fileDir.mkdirs();
}
FileOutputStreamfos=null;
try{
fos=newFileOutputStream(filePath);
fos.write(file.getBytes());
fos.flush();
returnResultUtil.success("UPLOAD_SUCCESS",URLEncoder.encode(newFileName,"utf-8"));
}catch(Exceptione){
e.printStackTrace();
returnResultUtil.fail("UPLOAD_ERROR");
}finally{
try{
if(fos!=null){
fos.close();
}
}catch(IOExceptione){
e.printStackTrace();
returnResultUtil.fail("UPLOAD_ERROR");
}
}
}
returnResultUtil.fail("UPLOAD_ERROR");
}}

Ⅸ 用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")
%>

Ⅹ 如何用javascript实现<img>控件的图片上传

fileupload(前台id：fleupld)控件加一个onclick方法：getvalue()
{document.getelementbyid("label的id").innerhtml=document.getelementbyid("fleupld").value;}
document.getelementbyid("fleupld").value
获取的是fileupload中文件的全路径，当然你可以截取这版个值，获得其子字符串（单权个文件的名称）。

阅读全文

与javascript打开上传图片文件相关的资料

热点内容
js内容尾部增加内容 浏览：803
sqlldr控制文件详解 浏览：614
做界面用哪个编程语言 浏览：942
怎么把网站打包成苹果手机 浏览：913
补丁在哪个文件夹 浏览：170
类似安全文件的软件 浏览：723
为什么编程要学这门语言 浏览：678
网卡的配置文件目录 浏览：960
计算器单片机编程叫什么 浏览：736
网站编辑需要会什么 浏览：622
单片机程序计数器的功能 浏览：917
网络摄像头怎么接虚拟储存器 浏览：84
好压IMG压缩文件转换成光盘 浏览：588
前端json格式如何排序 浏览：821
ocx实现选择保存文件 浏览：986
office2007教程免费下载 浏览：489
pop编程是什么 浏览：760
三星升级系统联接失败 浏览：929
微信忘记独立密码 浏览：555
spike如何编程 浏览：503

友情链接