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

2023-02-28 04:56:01JavaScript012

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

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h3>请选择图片文件：JPG/GIF</h3>

</form>

</body>

$("#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>

$("#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即可。

无需插件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>By：DragonDean</title>

//下面用于图片上传预览功能

function setImagePreview(avalue) {

var docObj=document.getElementById("doc")

var imgObjPreview=document.getElementById("preview")

if(docObj.files &&docObj.files[0])

{

//火狐下，直接设img属性

imgObjPreview.style.display = 'block'