如此这样：
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
function addPic(){
$("#uploadImage").click();
}
function asycUploadImage() {
var value = $("#uploadImage").val();
var extend = value.substring(value.lastIndexOf(".")+1).toLowerCase();
if (extend != ‘jpg‘ && extend != ‘jpeg‘ && extend != ‘png‘ && extend != ‘pic‘) {
alert("图片格式不正确");
return false;
}
var reader = new FileReader();
reader.onload = function(e){
// 做一些什么事
var someHtml = ‘‘;
someHtml += ‘<img src="‘+ e.target.result +‘">‘;
$(‘.scroll‘).append(someHtml);
// 滚动到最底部
var div = $(".wrapper")[0];
div.scrollTop = div.scrollHeight
}
reader.readAsDataURL(document.getElementById("uploadImage").files[0]);
var options = {
url : "some.json",
dataType : "json",
type : "post",
cache : false,
success : function(data){
}
}
$("#uploadImageForm").ajaxSubmit(options);
}
</script>
</head>
<body>
<div class="wrapper">
<div class="scroll"></div>
</div>
<form id="uploadImageForm">
<input id="uploadImage" type="file" name="multipartFile" onchange="asycUploadImage()" style="display:none;" />
</form>
<div><img src="some.png" onclick="addPic()">点我选择图片</div>
</body>
</html>
1. 点击其他元素，间接触发选择文件。
2. 显示到本地
3. ajax异步上传到服务器
4. 返回url
时间： 2024-10-06 08:56:49