multiple ajax上传,multiple多图选择,借助FormData通过ajax实现上传

var files;

var url = "/upimage/3g_xhr.PHP";

function getPath(fileQuery){

var i;

files =fileQuery.files;

var imgContainer=document.getElementById("imgPanel");

for(i=0;i

var reader = new FileReader();

var filename=files[i].name;

reader.onload =(function(filename){

return function(e){

var obj=document.createElement("tr");

obj.innerHTML="

p><p>+%22

+" style='vertical-align:bottom;'>"+filename+"

";

imgContainer.appendChild(obj);

};

})(filename);

reader.readAsDataURL(files[i]);

}

}

function getvl(obj){

getPath(obj);

}

function submitImg(){

for(var j=0;j

var xhr = new XMLHttpRequest ();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if ((xhr.status >= 200 && xhr.status < 300)

|| xhr.status == 304)

//200:Success.304:Tell browser to read cache.

{

alert(xhr.responseText);

}

}

}

var boundary = "------" + new Date () .getTime ();

xhr.open ("post",url,true );

var formData = new FormData ();

formData.append("name","nik22");

formData.append ("upfile",files[j]);

xhr.send (formData);

}

}

id="upform">

选择图片:

multiple="multiple" οnchange="getvl(this)" />

echo "No. files uploaded : ".count($_FILES['upfile']['name'])."
";

$uploadDir = "images_xhr/";

/**

for ($i = 0; $i < count($_FILES['upfile']['name']); $i++) {

echo "File names : ".$_FILES['upfile']['name'][$i]."
";

$ext = substr(strrchr($_FILES['upfile']['name'][$i],"."),1);

// generate a random new file name to avoid name conflict

$fPath = md5(rand() * time()) . ".$ext";

echo "File paths : ".$_FILES['upfile']['tmp_name'][$i]."
";

$result = move_uploaded_file($_FILES['upfile']['tmp_name'][$i],$uploadDir . $fPath);

if (strlen($ext) > 0){

echo "Uploaded ". $fPath ." succefully.
";

}

}

echo "Upload complete.
"*/

if($_FILES['upfile']['size'] == 0)

die("alert('请选择您要上传的图片!');history.go(-1);

");

$imageinfo = getimagesize($_FILES['upfile']['tmp_name']);

if($imageinfo[0] > 1200 || $imageinfo[1] > 800)

die("alert('图片大小不符合标准(长1200宽800)!');history.go(-1);");

if($imageinfo[2] < 1 || $imageinfo[2] > 3)

die("alert('图片只能是GIF,JPG,PNG格式!');history.go(-1);");

//$imageinfo[2] 的值得于1,表示是gif格式, 2是jpg格式,3是png

if($imageinfo[2] == 1)

{

$imageinfo[2] = ".gif";

}

elseif($imageinfo[2] == 2)

{

$imageinfo[2] = ".jpg";

}else

{

$imageinfo[2] = ".png";

}

//文件名:把时间和文件名的md5值组合,加上后缀得到文件名。

$randval = rand();

$imgname = date("YmdHis").substr(md5($randval),5).$imageinfo[2];

copy($_FILES['upfile']['tmp_name'],$uploadDir.$imgname) or die("move img error!");

echo "Upload succefully.
";

?>

注:1)上面的PHP文件放到文件夹upimage下,同时在PHP所在文件夹新建文件夹images_xhr,用于存

2)如果不通过ajax上传图片,那么将html页面中的form的action设置为/upimage/3g_xhr.PHP,

提交按钮的type设置为submit,同时将PHP文件中的注释的那段去掉注释,同时将它后面的代码

注释掉,就可以实现同时提交多个图片。

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现vue+ajax+php的多图上传并回显,可以按照以下步骤进行: 1.在前端使用Vue的上传组件,设置multiple属性为true,允许用户上传多张图片。 2.在上传组件的change事件中获取用户选择的图片文件,使用FormData对象将图片文件封装成表单数据。 3.使用axios或其他网络请求库将表单数据发送到服务器端。 4.在服务器端接收到表单数据后,解析出图片文件并保存到服务器的指定文件夹中。 5.将图片文件的URL返回给前端,用于回显图片。 下面是一个简单的示例代码: 前端代码: ```html <template> <div> <input type="file" ref="fileInput" @change="handleUploadChange" multiple> <button @click="uploadImages">上传图片</button> <div v-if="imageUrls.length > 0"> <div v-for="imageUrl in imageUrls" :key="imageUrl"> <img :src="imageUrl" style="width: 200px; height: 200px;"> </div> </div> </div> </template> <script> import axios from 'axios' export default { data () { return { imageFiles: [], imageUrls: [] } }, methods: { handleUploadChange () { this.imageFiles = Array.from(this.$refs.fileInput.files) }, uploadImages () { const formData = new FormData() this.imageFiles.forEach(file => { formData.append('images[]', file) }) axios.post('/api/upload_images.php', formData) .then(response => { this.imageUrls = response.data.imageUrls }) .catch(error => { console.log(error) }) } } } </script> ``` 后端代码(使用PHP): ```php <?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $imageUrls = []; $uploadDir = '/path/to/upload/folder/'; foreach ($_FILES['images']['error'] as $key => $error) { if ($error === UPLOAD_ERR_OK) { $tmpName = $_FILES['images']['tmp_name'][$key]; $fileName = basename($_FILES['images']['name'][$key]); $uploadPath = $uploadDir . $fileName; move_uploaded_file($tmpName, $uploadPath); $imageUrls[] = '/upload/' . $fileName; } } header('Content-Type: application/json'); echo json_encode(['imageUrls' => $imageUrls]); } ``` 在上面的示例代码中,使用了PHP的$_FILES变量来获取上传的图片文件。通过遍历$_FILES['images']['error']数组,可以判断每个文件是否上传成功。如果上传成功,将文件移动到指定的上传目录中,并将文件的URL保存到$imageUrls数组中。最后,将$imageUrls数组以JSON格式返回给前端,用于回显图片。 需要注意的是,上传文件时需要确保服务器端的上传目录有写入权限,否则会导致上传失败。同时,需要对上传的文件进行安全性检查,防止上传恶意文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值