Question

javascript js ajax 麻烦各位帮忙设计一个图片上传的系统，最好有详细的代码。

后台node，用fs根据上传图片的名称将图片分进不同的文件夹。
一个商品的图片上传系统，该商品图片有总览图及分型图两大种。
总览图分到一个文件夹就可以。
分型图因为商品下还有不同的小型号，比如：商品编号为A001，A001下包含A001-a A001-b。
A001-a及A001-b都为多图片。
这个这么去设计呢？

目前想的是这样：
图片上传
服务器返回图片略缩图，及flag
为略所图填写名称
将名称与flag捆绑上传
服务器通过前台传来的data改写图片名称
根据名称分配文件夹
但是因为之前没做过这种的，所以有点懵了，不知道这么去做。求指导～（分不是问题）

ajax插件用的是jquery-file-upload,后台用的node，js用的jq。

Answer 1

具体思路是，上传图片时，放入临时目录，上传完成后，对图片生成uuid，重命名并已入图片文件夹，在数据库中记录uuid与商品id的对应关系。

插件的问题，jquery-file-upload我没用过，不过看了github上的文档，感觉说得蛮详细的。后端的也有涉及。node的部分使用express的中间件jquery-file-upload-middleware，你在github上搜这个吧，有很详细的前后端的示例代码。

如果你想要用原生的也很简单。利用html5的上传接口，或者使用iframe做个隐藏表单就行了。后端node部分，就是解析req的body部分，并且把他们写入文件。因为是数据流，可以使用更快地流写入方式。

追问

嗯  后台用的是jquery-file-upload-middleware。现在的问题是前端这块写不好，没法获取生成的分型名称 就是A001-a这个没法获取

第一个红框是生成的A001-a  第二个红框是要点击的area，console.log出来的是未定义

追答

首先是取value部分，改为

var count = parseInt($(this).val(), 10);

不然你比的是字符串，可能会出问题的。

然后是你的这个问题。

var sileasd = $(this).prev('a').html();

这句，prev是拿当前节点的前一个节点，如果里面有参数，那就判断前一个节点是不是拥有此选择器。

所以你要用prevAll代替prev。同时由于a并非与此元素同级，而是在与它同级的MTaobaoIn_single_p的子级，所以还需使用find或者children来获取。

var sileased = $(this).prevAll('.MTaobaoIn_single_p').children('.MTaobaoIn_singlePic_upload').html();

或者

var sileased = $(this).parent().find('.MTaobaoIn_singlePic_upload').html();

此方法适用于这个form中就只有这一个id的情况。

不过我建议的是在元素上加上data数据绑定。使用$(element).data('id')的方式来获取id。

追问

谢谢谢谢 经验太少 写的东西漏洞太多。麻烦您了。

Answer 2

这个由你自己选