上传图片显示，ajaxUpload

来源：互联网发布：湖南卫视杜海涛知乎编辑：程序博客网时间：2024/05/18 00:42

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input name="fileId" type="file" class="m-wrap span12" id="staffphoto">

<img id="preview" style="padding:3px;color:#82D900;width:300px;height:100px;"/>

<button onclick="getSubmit()">提交</button>
</body>
<script src="../js/jquery-1.8.2.min.js"></script>

<script src="ajaxfileupload.js"></script>
<script>
function getSubmit(){
$.ajaxFileUpload({
type:"post",
url:"http://localhost:8080/SSM/testAjaxUpload.do",
//传值，将form表单中的值进行传入
data:{"fileId":$("#staffphoto").val()},
secureuri:false,
//上传input的id
fileElementId:'staffphoto',
dataType:"json",
success:function(data){
alert(data.resultCode+" "+data.resultMessage);

}
})
}
</script>

<script>
//图片上传绑定
$(document).ready(function() {
$("#staffphoto").change(
function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");//<img>标签
//当图片名称为空时，照片不显示。
if(document.getElementById('staffphoto').value.trim()==""){
document.getElementById('tr_userpicture').style.display = 'none';
}
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
//允许上传的图片格式
var newPreview = document.getElementById("staffphoto").value;
var regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi;
if (!regext.test(newPreview)) {
newPreview=="";
alert("选择的照片格式不正确，请重新选择！");
$(fileObj).after($(fileObj).clone($(fileObj)));
$(fileObj).remove();
//$("#image-picture").hide();
return false;
}
$img.attr("src", dataURL);
//$("#image-picture").show();

} else {
dataURL = $file.val();
var imgObj = document.getElementById("preview");

imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters
.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
});

})

</script>

</html>

遇到的问题，ajaxFileUpload不是方法

引入ajaxfileupload.js

阅读全文

0 0